Angular'da if Direktifi

Angular'da, bir etiketin bir değişkenin değerine bağlı olarak gösterilmesi veya gizlenmesi sağlanabilir. Bunun için özel bir direktif olan *ngIf kullanılır. Hadi onunla nasıl çalışılacağına bir göz atalım.

Başlangıç olarak bu direktifin içe aktarılması gerekir:

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

Ve dekoratördeki içe aktarımlar bölümüne eklenmelidir:

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

Şimdi aşağıdaki değişkenimiz olduğunu varsayalım:

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

Bu değişkenin değeri true ise gösterilecek bir div yapalım:

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

Şimdi de div'in, değişkenimizin değeri false ise gösterilmesini sağlayalım:

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