Introduction
For this post, we will look at the basics of templates in angular.
Overview
We will examine the following points:
- Templates fundamentals
- Template Types
- components of Templates
- The updation for the Event
What exactly is Template
Templates in Angular are views that are used to display information and modify the information whenever it occurs. The default language to display templates is HTML.
To get in-depth knowledge of the template in angular, fetch with AngularJS Training in Chennai to get a deep understanding of template in angular.
Why Template
Templates distinguish their view layers from all the other framework components, so we can alter views without breaking applications.
How do you make the template?
Two methods of defining templates.
- Inline Template
- External Template
In the beginning, we’re going to look at the Inline template. Inline template. So let’s start with the angular template example.
Inline Template
It is possible to create a template within the component class by using the template property of the decorator @Component.
Note: If you want to become a dynamic website developer, take AngularJS Online Course at FITA Academy and become an expert in dynamic website creation.
Start the HiComponent.ts file, then add the following line of code into the decorator for @Component.
import { Component, OnInit } from ‘@angular/core’;
@Component({
selector: ‘app-hi’,
template: `
<h1> Welcome </h1>
<h2> Name: {{ Name }}</h2>
`,
styleUrls: [‘./hi.component.css’]
})
export class HiComponent implements OnInit {
Name : string = “XYZ”;
constructor() { }
ngOnInit(): void {
}
}
Line 8: We can also write HTML code within components by using the templates property. Backtick characters () for strings with multiple lines.
Then run the program and you’ll be able to see the output screen below,
External Template
As a default feature, Angular CLI uses the external template. It connects the template to components by using the templateUrl feature. TemplateUrl is utilized in External format, whereas it is used in the case of intline Template is used as an intline Template instead of a URL for the template.
Now , open Hi.component,HTML and add the following lines of code
- Hello!
- Name : ame|Name: ame}
Watch the output screen, and there will be the following results on screen
Elements in Templates
Let’s begin with a description of each of the elements in the template
HTML
Angular utilizes HTML as an example language.
Interpolation
Interpolation is among the types of data binding that allows us to access the data of a component within the form of a template. To interpolate, we employ double curly braces|•|and}.
Template Expressions
The text is called|”” is referred to|”” is known} as a template expression.
Ex,
- {{Expression}}
Angular first examines the expression before returning the results as strings. The meaning of an expression template is that it’s a component instance. So {{ Name }} should be the property of the component that this template is bound.
Template Statements
Template Statements refer to statements that respond to user events.
- (event) =
Ex : Let’s make an event for clicking – add Changename() method to the hi.component.ts file in the following manner,
import { Component, OnInit } from ‘@angular/core’;
@Component({
selector: ‘app-hi’,
templateUrl: `./hi.component.html`,
styleUrls: [‘./hi.component.css’]
})
export class HiComponent implements OnInit {
Name : string = “XYZ”;
changeName() {
this.Name = “ABC”;
}
constructor() { }
ngOnInit(): void {
}
}
Now , open hi.component.html and insert the following line of code within it,
- Hello!
- Name : ame|Name: ame}
- Click here to switch
This ChangeName() method will be linked to click event that will be invoked upon click at the time of execution. This is referred to as event binding.
Watch the output screen of the browser.
Output after clicking. If the user clicks on the paragraph, the name of the course will change to “ABC.”
Summary
In the article, we’ve reviewed the basic templates, types of templates, angular template examples, and the execution of events. We hope you enjoyed this article. If you want the best training in AngularJS versions, AngularJS Training in Coimbatore provides the best options.