Kereaktifan Kondisi dalam Angular

Kereaktifan juga akan berfungsi dengan kondisi ngIf. Ini bermakna kita boleh menunjukkan atau menyembunyikan blok bergantung pada apa yang terkandung dalam sifat kelas.

Mari kita cuba secara praktikal. Katakan kita mempunyai blok berikut

app/app.component.html<div>
  text
</div>

Mari kita tunjukkan atau sembunyikannya mengikut kondisi:

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

Sekarang mari buat dua butang. Apabila diklik pada butang pertama, kita akan menunjukkan blok kita, dan apabila diklik pada butang kedua - menyembunyikannya:

app/app.component.html<button (click)="show()">
  tunjukkan
</button>
<button (click)="hide()">
  sembunyikan
</button>

Mari tambahkan dalam kelas komponen satu sifat yang akan mengawal sama ada blok ditunjukkan atau tidak:

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

Dan sekarang mari tulis pelaksanaan kaedah kita untuk menunjukkan dan menyembunyikan blok:

app/app.component.tsexport class AppComponent {
  public isShow: boolean = true;
  
  public show(): void {
    this.isShow = true;
  }
  public hide(): void {
    this.isShow = false;
  }
}