ngIf directive
You can add or remove an element from the DOM by applying an NgIf directive to that element (called the host element). Bind the directive to a condition expression like isActive
in this demo.
Source
<div *ngIf="isActive">
This text is displayed when active.
</div>
<div *ngIf="!isActive">
This text is displayed when not active.
</div>
<label>
<input type="checkbox" [(ngModel)]="isActive">
Is active
</label>
export class AppComponent {
isActive = true;
}
Result
This text is displayed when active.
The ngIf
directive doesn't hide elements with CSS. It adds and removes them physically from the DOM.
When the isActive
expression returns a truthy value, NgIf
adds the div
to the DOM. When the expression is falsy, NgIf
removes the div
from the DOM, destroying that element.
*ngIf with else
Source
<div *ngIf="isActive; else elseBlock">
This text is displayed when active.
</div>
<ng-template #elseBlock>
This text is displayed when not active.
</ng-template>
<label>
<input type="checkbox" [(ngModel)]="isActive">
Is active
</label>
export class AppComponent {
isActive = true;
}
Result
This text is displayed when active.
*ngIf with then/else
Source
<div *ngIf="isActive; then thenBlock else elseBlock"></div>
<ng-template #thenBlock>
This text is displayed when active.
</ng-template>
<ng-template #elseBlock>
This text is displayed when not active.
</ng-template>
<label>
<input type="checkbox" [(ngModel)]="isActive">
Is active
</label>
export class AppComponent {
isActive = true;
}
Result
*ngIf with as
Store the value locally. Handy when you check value or get it from async
pipe.
Source
<div *ngIf="data?.user as user">
User name: {{ user.name }}
</div>
export class AppComponent {
data = {
user: {
name: 'Superman',
},
};
}
Result
User name: Superman