NgIf direktiiv Angularis

Angularis saab teha nii, et silt kuvatakse või peidetakse sõltuvalt muutuja väärtusest. Selleks kasutatakse spetsiaalset direktiivi *ngIf. Vaatame, kuidas sellega töötada.

Alustuseks tuleb see direktiiv importida:

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

Ja lisada see imporditud osasse dekoratuuris:

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

Oletame nüüd, et meil on järgmine muutuja:

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

Teeme div-i, mis kuvatakse, kui see muutuja on väärtusega true:

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

Ja nüüd teeme nii, et div kuvataks, kui meie muutuja on väärtusega false:

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