Angular'дагы if директивасы

Angular'да тег белгилүү бир өзгөрмөнүн маанисине жараша көрсөтүлүшү же жашырылышы мүмкүн. Бул үчүн *ngIf атайын директивасы колдонулат. Келгиле, аны кантип колдонуш керек экенин карап көрөлү.

Башында, бул директиваны импорттоо керек:

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

Жана аны декоратордогу импорттор бөлүмүнө кошуу керек:

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

Эми бизде төмөнкүдөй өзгөрмө бар дейли:

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

Келгиле, бул өзгөрмө true маанисине ээ болгондо көрсөтүлө турган бир див түзөлү:

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

Эми див биздин өзгөрмөбүз false маанисине ээ болгондо гана көрсөтүлсүн:

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