Direktīva if Angular

Angular var izveidot tā, lai tags tiktu rādīts vai paslēpts atkarībā no mainīgā vērtības. Šim nolūkam tiek izmantota īpaša direktīva *ngIf. Apskatīsim, kā ar to strādāt.

Vispirms šī direktīva ir jāimportē:

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

Un jāpievieno to importu sadaļā dekoratorā:

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

Pieņemsim, ka mums ir šāds mainīgais:

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

Izveidosim div, kas tiks rādīts, ja šim mainīgajam ir vērtība true:

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

Un tagad izveidosim tā, lai div tiktu rādīts, ja mūsu mainīgajam ir vērtība false:

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