Angular-da if direktivi

Angular-da etmək olar ki, teq dəyişənin dəyərindən asılı olaraq göstərilsin və ya gizlədilsin. Bunun üçün xüsusi direktiv *ngIf tətbiq edilir. Gəlin onunla necə işləməyə baxaq.

Əvvəlcə bu direktivi import etmək lazımdır:

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

Və onu dekoratordakı importlar bölməsinə əlavə edin:

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

İndi tutaq ki, bizim aşağıdakı dəyişənimiz var:

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

Gəlin bir div edək ki, bu dəyişənin dəyəri true olduqda göstərilsin:

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

İndi isə elə edək ki, div bizim dəyişənin dəyəri false olduqda göstərilsin:

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