Direktiva if v Angularu

V Angularu lze zařídit, aby se tag zobrazoval nebo skrýval v závislosti na hodnotě proměnné. K tomu se používá speciální direktiva *ngIf. Pojďme se podívat, jak s ní pracovat.

Nejprve je třeba tuto direktivu importovat:

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

A přidat ji do sekce imports v dekorátoru:

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

Předpokládejme nyní, že máme následující proměnnou:

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

Udělejme div, který se zobrazí, pokud má tato proměnná hodnotu true:

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

A nyní udělejme, aby se div zobrazil, pokud má naše proměnná hodnotu false:

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