Templates in Angular

Introduction

In Angular, a template is a view whose purpose is to display data and update it when an event occurs. HTML is the default template language.The view layer is separated from the rest of the framework by templates, which allows us to update the view layer without damaging the application.

Each Angular template in your application is a piece of HTML that the browser will show as part of the page. Like conventional HTML, an Angular HTML template generates a view, or user interface, in the browser, but with a lot more capabilities.

When you use the Angular CLI to create an Angular application, the default template is app.component.html, which contains placeholder HTML.

Template syntax guides demonstrate how to coordinate data across classes and templates to regulate UX/UI.

The majority of template syntax guides include dedicated functioning example programmes that demonstrate each guide's specific focus. To demonstrate how they all operate together in one application, look at the Template Syntax live code/download example.

Ways of defining templates

Templates can be defined in two ways.

1. 1. Inline Template

2. 2. External Template

Inline Template

Using the template property of the @Component decorator, we may create a template directly in the component class. In Angular, there are templates.

Add the following line of code to the @Component decorator in the HiComponent.ts file.

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 {    
  }     
}     

External Template

The external template is used by default by Angular CLI. It uses the templateUrl option to link a template to a component. In the external format, TemplateUrl is utilised, however in the inline format, we use template instead of templateurl.

Now open Hi.component.html and paste the following code into it:

<h1>Hello</h1>    
<h2>Name : {{Name}}</h2>    

Elements of Templates

Templates can be defined in two ways.

1. 1. HTML

2. 2. Interpolation

3. 3. Template Expressions

4. 4. Template Statements

HTML

HTML is the template language used by Angular.

Interpolation

Interpolation is a type of data binding that allows us to access a component's data from a template. We utilise double curly brackets {{}} for interpolation.

Template Expressions

The text inside {{ }} is referred to as the template expression.

Example:

{{Expression}}  

The expression is evaluated first, and the result is returned as a string via Angular. A component instance is the scope of a template expression. That example, if we write Name, Name should refer to the attribute of the component to which this template is attached.

Template Statements

The statements that respond to a user event are known as Template Statements.

(event) = {{Statement}}

Example

Let's make a click event: inside the hi.component.ts file, add the changename() method as shown below.

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 paste the code below into it.

<h1>Hello</h1>    
<h2>Name : {{Name}}</h2>    
<p (click)="changeName()">Click here to change</p>   

The click event is bound to the changeName() method, which will be called when the mouse is clicked during runtime. This is referred to as event binding.

Conclusion

Angular is a great multi-functional framework which speeds up your development process. It is a strong software development environment that includes dependency injection and deep linking.