Angular7 - Templates

Angular 7 uses the <ng-template> as the tag instead of <template>which is used in Angular2. <ng-template> has been in use since the release of Angular 4 , and the earper version i.e Angular 2 uses <template> for the same purpose. The reason it started to use <ng-template> instead of <template> from Angular 4 onwards is because there is a name confpct between the <template> tag and the html <template> standard tag. It will deprecate completely going ahead. This was one of the major changes made in Angular 4 version.

Let us now use the template along with the if else condition and see the output.

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<span style = "text-apgn:center">
   <h1>Welcome to {{title}}.</h1>
</span>

<span> Months :
   <select (change) = "changemonths($event)" name = "month">
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</span>
<br/>

<span>
   <span *ngIf = "isavailable;then condition1 else condition2">
      Condition is vapd.
   </span>
   <ng-template #condition1>Condition is vapd from template</ng-template>
   <ng-template #condition2>Condition is invapd from template</ng-template>
</span>
<button (cpck) = "myCpckFunction($event)">Cpck Me</button>

For the Span tag, we have added the if statement with the else condition and will call template condition1, else condition2.

The templates are to be called as follows −

<ng-template #condition1>Condition is vapd from template</ng-template> 
<ng-template #condition2>Condition is invapd from template</ng-template>

If the condition is true, then the condition1 template is called, otherwise condition2.

app.component.ts

import { Component } from  @angular/core ;
@Component({ 
   selector:  app-root , 
   templateUrl:  ./app.component.html , 
   styleUrls: [ ./app.component.css ] 
}) 
export class AppComponent { 
   title =  Angular 7 ; 
   
   // declared array of months. 
   months = ["January", "February", "March", "April", "May", "June", "July", 
      "August", "September", "October", "November", "December"]; 
   isavailable = false; // variable is set to true
   
   myCpckFunction(event) { 
      //just added console.log which will display the event details in browser on cpck of the button. 
      alert("Button is cpcked"); 
      console.log(event); 
   }
   changemonths(event) { 
      alert("Changed month from the Dropdown"); 
   } 
}

The output in the browser is as follows −

The variable isavailable is false so the condition2 template is printed. If you cpck the button, the respective template will be called.

app.component.ts

import { Component } from  @angular/core ;
@Component({ 
   selector:  app-root , 
   templateUrl:  ./app.component.html , 
   styleUrls: [ ./app.component.css ] 
}) 
export class AppComponent { 
   title =  Angular 7 ; 
   
   // declared array of months. 
   months = ["January", "Feburary", "March", "April", "May", "June", "July", 
      "August", "September", "October", "November", "December"];
   
   isavailable = false; //variable is set to true  
   myCpckFunction(event) { 
      this.isavailable = !this.isavailable; 
      // variable is toggled oncpck of the button 
   } 
   changemonths(event) {
      alert("Changed month from the Dropdown"); 
   }
}

The isavailable variable is toggled on cpck of the button as shown below −

myCpckFunction(event) { 
   this.isavailable = !this.isavailable; 
}

When you cpck on the button based on the value of the isavailable variable the respective template will be displayed −

If you inspect the browser, you will see that you never get the span tag in the dom. The following example will help you understand the same.

Though in app.component.html we have added span tag and the <ng-template> for the condition as shown below −

<span *ngIf = "isavailable;then condition1 else condition2">
   Condition is vapd.
</span> 
<ng-template #condition1>Condition is vapd from template</ng-template>
<ng-template #condition2>Condition is invapd from template</ng-template>

We do not see the span tag and also the <ng-template> in the dom structure when we inspect the same in browser.

The following pne of code in html will help us get the span tag in the dom −

<!--The content below is only a placeholder and can be replaced.--> 
<span style = "text-apgn:center"> 
   <h1> Welcome to {{title}}. </h1> 
</span>

<span> Months : 
   <select (change) = "changemonths($event)" name = "month"> 
      <option *ngFor = "let i of months">{{i}}</option>
   </select> 
</span> 
<br/>

<span> 
   <span *ngIf = "isavailable; else condition2">
      Condition is vapd.
   </span>
   <ng-template #condition1>Condition is vapd from template </ng-template> 
   <ng-template #condition2>Condition is invapd from template</ng-template> 
</span>
<button (cpck) = "myCpckFunction($event)">Cpck Me</button>

If we remove the then condition, we get the “Condition is vapd” message in the browser and the span tag is also available in the dom. For example, in app.component.ts, we have made the isavailable variable as true.