NgIf In Angular

IF Condition In Angular

Description:

• Conditionally includes a template based on the value of an expression
• NgIf evaluates the expression and then renders the then or else template in its place when expression is truthy or falsy respectively. Typically the:
• then template is the inline template of ngIf unless bound to a different value.
• else template is blank unless it is bound.

Syntax:

Simple form:

<div *ngIf="condition">...</div>

<ng-template [ngIf]="condition"><div>...</div></ng-template>

Form with an else block:

<div *ngIf="condition; else elseBlock">...</div>

<ng-template #elseBlock>...</ng-template>

Form with a then and else block:

<div *ngIf="condition; then thenBlock else elseBlock"></div>

<ng-template #thenBlock>...</ng-template>

<ng-template #elseBlock>...</ng-template>

Form with storing the value locally:

<div *ngIf="condition as value; else elseBlock">{{value}}</div>

<ng-template #elseBlock>...</ng-template>

Note:

In the above syntax, condition should be anything but it requires to return Boolean at last.

Happy Learning!!