Direktif if di Angular

Di Angular, Anda dapat membuat suatu tag ditampilkan atau disembunyikan tergantung pada nilai suatu variabel. Untuk ini digunakan directive khusus *ngIf. Mari kita lihat cara kerjanya.

Pertama-tama, direktif ini perlu diimpor:

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

Dan tambahkan ke bagian impor dalam dekorator:

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

Sekarang misalkan kita memiliki variabel berikut:

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

Mari kita buat sebuah div yang akan ditampilkan, jika variabel ini memiliki nilai true:

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

Dan sekarang mari kita buat agar div ditampilkan, jika variabel kita memiliki nilai false:

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