ngIf directive
This is the documentation for Angular 6.
You can switch to the latest version Angular 10.
You can switch to the latest version Angular 10.
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