If-direktiivi Angularissa
Angularissa voidaan tehdä niin, että tagi
näytetään tai piilotetaan riippuen
muuttujan arvosta. Tätä varten käytetään
erityistä direktiiviä *ngIf. Katsotaan,
kuinka sen kanssa työskennellään.
Aluksi tämä direktiivi on tuotava:
import {NgIf} from "@angular/common";
Ja lisättävä se importtien osaan dekoratorissa:
@Component({
.....
imports: [....., NgIf],
....
})
Olkoon meillä nyt seuraava muuttuja:
export class AppComponent {
public isAdmin: boolean = true;
}
Tehdään div, joka näytetään,
jos tämä muuttuja on arvoltaan true:
<div *ngIf="isAdmin">
text
</div>
Tehdään nyt niin, että div näytetään,
jos muuttujamme on arvoltaan false:
<div *ngIf="!isAdmin">
text
</div>
Tee ominaisuus isAdult. Näytä
aikuisille tarkoitettu teksti, jos muuttujassamme
on arvo true.
