ng-template :
Used to create partial HTML template which needs to be reused.
Note: syntax of using Structural Directives on ng-template is different because in the compilation process angular converts structural directives into the ng-template tags.
That's why two templates will not work. So we have different tricks to use them.
use of *ngIf:
<ng-template [ngIf]="newuser">
Welcome to DritalConnect!
</ng-template>
use of *ngFor:
<ng-template ngFor let-emp [ngForOf]="employeeList">
ng-container:
Used when there are use of more that two structural directives.
Used when have to call a ng-template with the help of its *ngTemplateOutlet attribute.
Used when don't need a DOM tag at run-time, but need to use an angular Structural Directive.
<ng-container *ngTemplateOutlet="demotemplate"></ng-container>
<ng-template #demotemplate>
Welcome to DritalConnect!
</ng-template>
ng-content:
Used when need to keep the component's HTML content dynamic, so that anyone can add their own content inside the Component as per their requirement.
This tag defines the place where in the Component the coming HTML will be placed.
Component html: (Let's suppose we have created a component IQComponent with selector <angular-questions>)
<h1>Angular Interview Questions</h1>
<ng-content></ng-content>
<p>All the Best!!</p>
Now how to call this component in HTML: (The content inside the selector tags will be rendered in place of the <ng-content> in the above component HTML)
<angular-questions>
<p> Part 1 </p>
<h1>Q1. What is angular?</h1>
<h1>Q2. Why to use angular?</h1>
</angular-questions>
Another call of same component with different content:
<angular-questions>
<p> Part 2 </p>
<h1>Q16. What is directive?</h1>
<h1>Q17. Why are pipes?</h1>
</angular-questions>