Angular-da if direktivasi

Angular-da tegni o'zgaruvchi qiymatiga qarab ko'rsatish yoki yashirish mumkin. Buning uchun maxsus *ngIf direktivasi qo'llaniladi. Keling, uning bilan qanday ishlashni ko'rib chiqaylik.

Boshlanish uchun ushbu direktivani import qilish kerak:

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

Va uni dekoratordagi importlar bo'limiga qo'shing:

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

Endi faraz qilaylik, bizda quyidagi o'zgaruvchi mavjud:

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

Keling, ushbu o'zgaruvchi true qiymatiga ega bo'lganda ko'rsatiladigan div yarataylik:

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

Endi esa, div bizning o'zgaruvchimiz false qiymatiga ega bo'lganda ko'rinsin:

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