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
This text is displayed when 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