Difference between ng-template and ng-container

ng-template

It is a Angular element directive and It is basically used with structure directive.

example:-

In component ts file


isShowData=true;

in component html file


<ng-template *ngIf="isShowData">
<div>Data is showing</div>
</ng-template>

Suppose If you do not use structure directive in ng-template then value will be show true.


<ng-template>
<div>Data is showing</div>
</ng-template>
Output:

ng-container

this directive is basically used to avoid extra div and you can implement structure directive in ng-container.


 <ng-container *ngIf="userList">
 <div class="user" *ngFor="let user of userList">
        <div class="user-detail">
            {{user | json}}
        </div>

 </ng-container>

Suppose If you do not use structure directive in ng-container then content will be show.


 <ng-container>
 <div>Data is showing</div>
 </ng-container>
Output: Data is showing