Conditional Rendering in Angular Using *ngIf


How to conditionally render HTML in Angular ?

You can make use of ngIf,ng-template and ng-container to conditionally render HTML.

If you simply want to render some HTML if a condition is satisfied you can use ngIf and ng-container

<ng-container *ngIf="showEmployee">
  <h3>
    Data is here !!
  </h3>
</ng-container>

If you also have an else block, you can make use of ng-container and ng-template.

<ng-container *ngTemplateOutlet="showEmployee ? ifblock : elseblock">
</ng-container>

<ng-template #ifblock>
  <h3>
    If Data is here !!
  </h3>
</ng-template>

<ng-template #elseblock>
  <h3>
    Else Data is here !!
  </h3>
</ng-template>