Angular ngIf

  • Language:: Javascript
  • Type:: Front End
  • Context:: Using an ngIf directive with Angular
  • Description – Ways to use the ngIf directive
  • Snippets

Simple form with shorthand syntax:

<div *ngIf="condition">Content to render when condition is true.</div>`

Simple form with expanded syntax:

<ng-template [ngIf]="condition"><div>Content to render when condition is true.</div></ng-template>
 

Form with an “else” block:

<div *ngIf="condition; else elseBlock">Content to render when condition is true.</div> <ng-template #elseBlock>Content to render when condition is false.</ng-template>

Shorthand form with “then” and “else” blocks:

<div *ngIf="condition; then thenBlock else elseBlock"></div> <ng-template #thenBlock>Content to render when condition is true.</ng-template> <ng-template #elseBlock>Content to render when condition is false.</ng-template>

📇Additional Metadata