angular ng-template, ng-content, ng-container and ngTemplateOutlet

ng-template - give you a templated layout and supports ngdirective such as ngIf.

<ng-template [ngIf]="showIt">

<div>

template world

</div>

</ng-template>

ng-content - is react context api - ability to transfer markup from parent to child

ng-container - provide a better way to render complex and nested mark up. Please refer to code below for how to use a container.

<ng-container *ngIf="showIt">

<p>come see it </p>

</ng-container>

ng-templateOutlet - use with ng-container, it provide a way to render content conditionally and a way to reuse template if you have repetitive layout or design.

<ng-template #home>

Default

</ng-template>

<ng-template #custom>

custom

</ng-template>

<ng-container *ngTemplateOutlet="showIt ? home : custom">