Angular'da Koşulların Reaktivitesi

Reaktivite, ngIf koşullarıyla da çalışacaktır. Bu, bir bloğu sınıf özelliğinde ne olduğuna bağlı olarak gösterebileceğimiz veya gizleyebileceğimiz anlamına gelir.

Pratikte deneyelim. Aşağıdaki bloğa sahip olduğumuzu varsayalım

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

Onu bir koşula bağlı olarak gösterelim veya gizleyelim:

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

Şimdi iki buton yapalım. Birinciye tıklandığında bloğumuzu gösterelim, ikinciye tıklandığında ise gizleyelim:

app/app.component.html<button (click)="show()">
  göster
</button>
<button (click)="hide()">
  gizle
</button>

Bileşen sınıfına, bloğun gösterilip gösterilmediğini düzenleyecek bir özellik ekleyelim:

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

Şimdi bloğu gösterme ve gizleme metodlarımızın gerçekleştirimini yazalım:

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