Angular 4 <ng-template> Example

,


Project Structure

angular-demo
|
|--src
|   |
|   |--app 
|   |   |
|   |   |--app.module.ts
|   |   |--app.component.ts
|   |   |--ng-template-ngfor.component.ts
|   |   |--ng-template-ngfor.component.html
|   |   |--ng-template-ngif.component.ts
|   |   |--ng-template-ngif.component.html
|   |   |--ng-template-ngswitch.component.ts
|   |   |--ng-template-ngswitch.component.html
|   |   |--message.directive.ts
|   |   |--cp-msg.component.ts
|   |   |--cp-msg.component.html
|   |   |--cp-if.directive.ts
|   |   |--cp-if-demo.component.ts
|   |   |--cp-if-demo.component.html
|   |   
|   |--main.ts
|   |--index.html
|   |--styles.css
|
|--node_modules
|--package.json

1. <ng-template> with ngFor

Find the example to use <ng-template> with ngFor.

ng-template-ngfor.component.ts

import { Component } from '@angular/core';

@Component({
   selector: 'app-ngfor',
   templateUrl: './ng-template-ngfor.component.html'
})
export class NgTemplateNgForComponent { 
   allPersons = [
     {name: 'Mahesh', age: '25'},
     {name: 'Shakti', age: '23'},
     {name: 'Krishna', age: '23'},
     {name: 'Radha', age: '21'},  
   ];
} 

ng-template-ngfor.component.html

<h3>ng-template with ngFor</h3>
<ng-template ngFor let-person [ngForOf]= "allPersons" let-i="index">
  <p>{{i + 1}}. {{person.name}} : {{person.age}} </p>
</ng-template> 

let declares template input variable. The properties of NgFor such as index, first, last, even, odd can be assigned to a variable using let within the <ng-template>. Find the sample code.

<ng-template ngFor let-item [ngForOf]="items" let-i="index" let-o="odd" let-e="even" let-f="first" let-l="last" [ngForTrackBy]="trackByFn" >
 ---
</ng-template> 

2. <ng-template> with ngIf

Here we will provide example to use <ng-template> with ngIf, ngIf-else and ngIf-then-else.

ng-template-ngif.component.ts

import { Component } from '@angular/core';

@Component({
   selector: 'app-ngif',
   templateUrl: './ng-template-ngif.component.html'   
})
export class NgTemplateNgIfComponent { 
  toggleFlag1= true;
  toggleFlag2= true;
  toggleFlag3= true;
  
  onToggle1() {
   this.toggleFlag1 = (this.toggleFlag1 === true)? false : true;
  }
  onToggle2() {
   this.toggleFlag2 = (this.toggleFlag2 === true)? false : true;
  }
  onToggle3() {
   this.toggleFlag3 = (this.toggleFlag3 === true)? false : true;
  }   
} 

ng-template-ngif.component.html

<h3>ng-template with ngIf</h3>
<button type="button" (click)="onToggle1()">Toggle</button>

<ng-template [ngIf]= "toggleFlag1" >
   <div>Hello World!</div>
</ng-template>

<h3>ng-template with ngIf-else</h3>

<button type="button" (click)="onToggle2()">Toggle</button>

<div *ngIf="toggleFlag2; else msgElseBlock" >
   <div>Hello World!</div>
</div>

<ng-template #msgElseBlock>
   <div>Else Block: Hello World! </div>
</ng-template>

<h3>ng-template with ngIf-then-else</h3>

<button type="button" (click)="onToggle3()">Toggle</button>

<div *ngIf="toggleFlag3; then thenBlock else elseBlock">

</div>
<ng-template #thenBlock>
    <div>Then Block: Hello World!</div>
</ng-template>
<ng-template #elseBlock>
    <div>Else Block: Hello World!</div>
</ng-template> 

In case of then and else, we need to assign a local template reference variable to our <ng-template> element and then conditionally ngIf will display it.

3. <ng-template> with ngSwitch

Find the example to use <ng-template> with ngSwitch.

ng-template-ngswitch.component.ts

import { Component } from '@angular/core';

@Component({
   selector: 'app-ngswitch',
   templateUrl: './ng-template-ngswitch.component.html'   
})
export class NgTemplateNgSwitchComponent { 
   myDir= '';
} 

ng-template-ngswitch.component.html

<h3>ng-template with ngSwitch</h3>
<input type="radio" name="direction" (click)="myDir='east'">East
<input type="radio" name="direction" (click)="myDir='west'">West
<input type="radio" name="direction" (click)="myDir='north'">North
<input type="radio" name="direction" (click)="myDir='south'">South
<br/><br/>
<div [ngSwitch]="myDir">
<ng-template [ngSwitchCase]= "'east'"> Go to <b>East</b> Direction </ng-template>
<ng-template [ngSwitchCase]= "'west'"> Go to <b>West</b> Direction </ng-template>
<ng-template [ngSwitchCase]= "'north'"> Go to <b>North</b> Direction </ng-template>
<ng-template [ngSwitchCase]= "'south'">Go to <b>South</b> Direction </ng-template>
<ng-template ngSwitchDefault> No Direction </ng-template>


4. <ng-template> with TemplateRef and ViewContainerRef


message.directive.ts

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({ 
   selector: '[cpMsg]' 
})
export class MessageDirective {
   constructor(public viewContainerRef: ViewContainerRef) { }
} 

cp-msg.component.ts

import { Component, ViewChild, ViewChildren, AfterViewInit, TemplateRef, ViewContainerRef, QueryList } from '@angular/core';
import { MessageDirective } from './message.directive';

@Component({
   selector: 'app-msg',
   templateUrl: './cp-msg.component.html'
})
export class CpMsgComponent implements  AfterViewInit { 
    @ViewChild('msg')
    private msgTempRef : TemplateRef<any>
 
    @ViewChildren(MessageDirective)
    private queryList: QueryList<MessageDirective> 
 
    ngAfterViewInit() {
 this.queryList.map(messageDirective => 
      messageDirective.viewContainerRef.createEmbeddedView(this.msgTempRef)); 
    } 
}

cp-msg.component.html

<h3>ng-template with TemplateRef and ViewContainerRef</h3>

<ng-template #msg>
   Welcome to you.<br/>
   Happy learning!
</ng-template>

<h3>Message </h3>

<div cpMsg> </div>

<h3>Message </h3>

<div cpMsg> </div> 

5. <ng-template> with Custom Structural Directive

Here we will provide example of <ng-template> with custom structural directive.

cp-if.directive.ts

import { Directive, TemplateRef, ViewContainerRef, Input } from '@angular/core';

@Directive({ 
     selector: '[cpIf]' 
})
export class CpIfDirective {
 constructor( private templateRef: TemplateRef<any>,
              private viewContainer: ViewContainerRef) { }
 @Input() set cpIf(condition: boolean) {
    if (condition) {
    this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
    this.viewContainer.clear();
   } 
 }
} 

cp-if-demo.component.ts

import { Component } from '@angular/core';

@Component({
   selector: 'app-cpif',
   templateUrl: './cp-if-demo.component.html'
})
export class CpIfDemoComponent { 
} 

cp-if-demo.component.html

<h3>ng-template with Custom Structural Directive</h3>
<div>
  Show Message:
  <input type="radio" name="rad" (click)= "showCpIf= 'yes'"> Yse
  <input type="radio" name="rad" (click)= "showCpIf= 'no'"> No
</div>
<br/>
<div *cpIf="showCpIf === 'yes'">
  Hello cpIf Directive.
</div>
<ng-template [cpIf]="showCpIf === 'no'">
   <div>
      Message not Available.
  </div>
</ng-template> 

Application Module and Component

app.component.ts

import { Component } from '@angular/core';

@Component({
   selector: 'app-root',
   template: `
         <app-ngfor></app-ngfor>
  <app-ngif></app-ngif>
  <app-ngswitch></app-ngswitch>
  <app-msg></app-msg>
  <app-cpif></app-cpif>   
   `
})
export class AppComponent { 
} 

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';
import { NgTemplateNgForComponent } from './ng-template-ngfor.component';
import { NgTemplateNgIfComponent } from './ng-template-ngif.component';
import { NgTemplateNgSwitchComponent } from './ng-template-ngswitch.component';
import { CpIfDemoComponent } from './cp-if-demo.component';
import { CpMsgComponent } from './cp-msg.component';
import { MessageDirective } from './message.directive';
import { CpIfDirective } from './cp-if.directive';

@NgModule({
  imports: [     
        BrowserModule
  ],
  declarations: [
        AppComponent,
 NgTemplateNgForComponent,  
 NgTemplateNgIfComponent,
 NgTemplateNgSwitchComponent,
 CpIfDemoComponent,
 CpMsgComponent,
 MessageDirective,
 CpIfDirective
  ],
  providers: [

  ],
  bootstrap: [
        AppComponent
  ]
})
export class AppModule { } 








Related Post


Latest Post


Recent Posts Widget

Make sure to never miss a thing...

Get the latest news from the creative industry along with other creative goodies, conveniently delivered to social media.