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>