Angular-da if direktiwasy

Angular-da bellik bir üýtgeýjiniň bahasyna görä görkezilip ýa-da gizlenip bilner. Munuň üçin ýörite *ngIf direktiwasy ulanylýar. Geliň, on bilen nähili işlemelidigine seredeliň.

Ilki bilen, bu direktiwany import etmeli:

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

We ony dekoratordaky import bölümine goşmaly:

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

Indi bizde aşakdaky ýaly üýtgeýji bar diýeliň:

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

Geliň, bu üýtgeýjiniň bahasy true bolanda görkeziler ýaly bir div dözdüreliň:

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

Indi bolsa, div-iň üýtgeýjimiziň bahasy false bolanda görkezilmegini gazanalyň:

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