Direktíva if v Angular

V Angular je možné dosiahnuť, aby sa element zobrazoval alebo skrýval v závislosti od hodnoty premennej. Na to sa používa špeciálna direktíva *ngIf. Poďme sa pozrieť, ako s ňou pracovať.

Na začiatok je potrebné túto direktívu importovať:

app/app.component.tsimport {NgIf} from "@angular/common";

A pridať ju do sekcie imports v dekorátore:

app/app.component.ts@Component({
  .....
  imports: [....., NgIf],
  ....
})

Nech máme teraz nasledujúcu premennú:

app/app.component.tsexport class AppComponent {
  public isAdmin: boolean = true;
}

Urobme div, ktorý sa zobrazí, ak má táto premenná hodnotu true:

app/app.component.html<div *ngIf="isAdmin">
  text
</div>

A teraz urobme tak, aby sa div zobrazil, ak má naša premenná hodnotu false:

app/app.component.html<div *ngIf="!isAdmin">
  text
</div>