Angular ng container,ng template,ng content,ng templateoutlet example.

 

How to use ng container, ng template, ng content, ng templateoutlet in angular?

Ng container: ng-container is an angular element using this element that can host structural directives.

employee = [
  {
    empid: null,fullname: null,city: null,experience: null  
  },
  {
    empid: null,fullname: null,city: null,experience: null  
  },
  { empid: 6523,fullname: "Michel",city: "london",experience: "7 years"
  },
  { empid: 6523,fullname: "peeter",city: "Dubai",experience: "8 years"
  }
];

<div *ngFor="let data of employee;">
    <div>{{data.fullname}}</div>
</div>

Have you seen the above code?.employee array data having two null data rows. The above code will work perfectly but unnecessary first two div will be rendered in UI without having data.

<ng-container *ngFor="let data of employee;">
        <div *ngIf="data.fullname">{{data.fullname}}</div>
</ng-container>

Using ng container avoiding blank data row display in the UI. Some other scenario described the below example. 

<tr *ngFor="let data of employee;let even = even; let odd = odd" *ngIf="even ==true; else oddtemplate">
            <td >{{data.empid}}</td>
            <td >{{data.fullname}}</td>
            <td>{{data.city}}</td>
            <td>{{data.experience}}</td>
    </tr>

 We can not use both statements in the same element.

<ng-container *ngFor="let data of employee;let even = even; let odd = odd">
            <tr class="evencls" *ngIf="even ==true; else oddtemplate"  >
                <td >{{data.empid}}</td>
                <td >{{data.fullname}}</td>
                <td>{{data.city}}</td>
                <td>{{data.experience}}</td>
            </tr>
 </ng-container>

ng template:

ng-template is also an angular element which is used for rendering the HTML templates already we have used in angular ngfor example, angular ngif example tutorial.

<ng-container *ngFor="let data of employee;let even = even; let odd = odd">
            <tr class="evencls" *ngIf="even ==true; else oddtemplate"  >
                <td >{{data.empid}}</td>
            </tr>
            <ng-template #oddtemplate>
                <tr class="oddcls"  >
                        <td >{{data.empid}} </td>
                    </tr>
              </ng-template>
 </ng-container>

<table class="table" *ngIf="employee">
    <thead>
        <tr>
            <th scope="col">Employee Id</th>
            <th scope="col">Full Name</th>
            <th scope="col">Role</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let data of employee"   >
            <td>{{data.empid}}</td>
            <td>{{data.fullname}}</td>
            <td>
                    <ng-container *ngIf="data.role =='public';then  public; else user">
                    </ng-container>
                    <ng-template #user>
                        <p>authenticated</p>
                    </ng-template>
                    <ng-template #public>
                            <p>public</p>
                    </ng-template>
                </td>
        </tr>
    </tbody>
</table>  

ng-content: 

Configuring the HTML content in component according to the user requirement. This means, using ng content we can place HTML element within the ng-content with help of select statement.

ngTemplateOutlet:

The main purpose of using the ngTemplateOutlet reuse template in component and also dynamically we can place the template in HTML component according to the user needs.

<div class="header">
        <ng-container *ngTemplateOutlet="adminheader ? adminheader :userheader"></ng-container>
</div>
<div class="ads">
         <ng-container *ngTemplateOutlet="ads"></ng-container>
</div> 
 <ng-template #adminheader>Admin Header</ng-template>
<ng-template #userheader>user Header</ng-template>
<ng-template #ads>Ads</ng-template>

import { Component, OnInit,TemplateRef } from '@angular/core';
private adminheader: TemplateRef<any>;
private userheader: TemplateRef<any>;
private ads: TemplateRef<any>;