×
DocsConsole

DocsConsole

Angular Templates

By | | Updated : 2018-08-15 | Viewed : 252 times

Angular Templates

The Angular Template is belongs to the view part of the MVC. Template plays key role in displaying the response data in the View. Angular Templates represents the view. Template will be used to display response data, which is coming from the component. Here we will learn about Angular template and its features.

Template and its Syntax

Before we discuss about Angular Template please have a look at below given code. Here we have BookComponent and Template to display the books information.

book.component.ts
import { Component } from '@angular/core';
import { BOOKS } from '../Books';
@Component({
  selector: 'app-root',
  templateUrl: './book.component.html',
  styleUrls: ['./app.component.css']
})
export class BookComponent {
  booksType = 'Fiction Series';
  books   	= BOOKS;
  showBookDetails(): void {
	//To display book details
  }
}
book.component.html
<h6> {{booksType}} </h6>
<ul>
<li *ngFor="let book of books" (click)="showBookDetails(book)">{{book.title}}</li>
<ul>

Angular Template

Template looks like the html. But it also contains the other type of syntax also like template Syntax.

Template Syntax

In the above code, we are trying to display the book’s Type and title by using {{booksType}} and {{book.title}}. These type of syntax is called Template Syntax. Template syntax will be used by Angular to modify the html, which is to be render. Template syntax contains interpolation, databinding and directives.

Different type of Template Syntax example.

Template syntax type Syntax example
Interpolation {{booksType}} and {{book.title}}
Databinding (Property Binding ) {{booksType}}
Databinding (EventBinding) (click)="showBookDetails(book)"
Directives *ngFor

Note: Interpolation is part of Property Binding.

Inline Template

Here we used html as separate html template file and linked with templateURL in @Component Decorator. We can use inline html sting in the decorator @component. But you have to use property called template in decorator @Component.Please find the below given example.

book.component.ts
import { Component } from '@angular/core';
import { BOOKS } from '../Books';
@Component({
  selector: 'app-root',
  template: '<h6> {{booksType}} </h6>
 <ul>
 <li *ngFor="let book of books" (click)="showBookDetails(book)">{{book.title}}</li>
 <ul>',
  styleUrls: ['./app.component.css']
})
export class BookComponent {
  booksType = 'Fiction Series';
  books   	= BOOKS;
  showBookDetails(): void {
	//To display book details
  }
}

Template interpolation

For example if you observe teh below given code snippet.

book.component.html
<h6> {{booksType}} </h6>
<ul>
<li *ngFor="let book of books" (click)="showBookDetails(book)">{{book.title}}</li>
<ul>

It contains Template syntax like curly {{}} braces. Here we placed booksType and book.title in curly braces. These curly braces {{ }} are called interpolation. Interpolation will be used by the angular for property binding. While before rendering the html by browser, Angular will have to evaluate those curly braces. In evaluation, Angular will fetch component property value as interpolated string to display. Actually the string, which is placed in between the braces is called Template expression. After evaluation, the resulted interpolated string will assign in html element or attribute.

Usages of interpolation

Ussage Example
To replace with component property Ex: <h6> {{booksType}} </h6>
To replace resulted arithmetic expression as string value Ex: <span> The sum of 2 + 2 is {{ 2 + 2 }</span>
To invoke the component’s method. Ex: <span> The sum of 2 + 2 is not as {{ 2 + 2 + getAverage() }}</span>

Template Expressions and Context

In the above the code snippet, booksType and book.title is called a Template Expression. The below given diagram illustrates about the interpolation and expression.

Angular Template interpolation and Expression

Here booksType is Expression, which is surrounded by {{ }} interpolated braces. Expression will be evaluated and displayed as string in html/DOM by Angular. In the property binding, expression will be used.

Expression context

Sometimes, we may face with variable name collision. So angular will follow some rules to resolve the name collision. Variable precedence will be decided as given below order.

Template Variable -- > Directive Context -- > Components member names.

If you observe in the above example books variable is presented in component and template as well.Please see the template code given below.

book.component.html
<h6> {{booksType}} </h6>
<ul>
<li *ngFor="let book of books" (click)="showBookDetails(book)">{{book.title}}</li>
<ul>

So here books variable will be resolved and consider as template variable not as component property.

Template Variable

Example Code For Template Variable
<div *ngFor="let book of books">{{book.title}}</div>
<div #bookVar>{{ bookVar.tile}}</div>

In the above example #book1 and books are called Template variables. These type of variables will be used to refer the component properties.

Angular Template Statements

A template statement will be used in event binding. The event binding syntax will be as

(EVENT)=”CALLBACKFUNCTION()”

To fire the event, template statement will be used.

Example code for Template Statement
<ul>
<li *ngFor="let book of books" (click)="showBookDetails(book)">{{book.title}}</li>
<ul>

Here (click)="showBookDetails(book)" is template statement.

Leave A Reply