ngIf directive

This is the documentation for Angular 6.
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.

Is 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.

Is 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

This text is displayed when active. Is active

*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