Reaktiivisuus ehdoissa Angularissa

Reaktiivisuus toimii myös ehdoilla ngIf. Tämä tarkoittaa, että voimme näyttää tai piilottaa lohkon riippuen siitä, mitä luokan ominaisuus sisältää.

Kokeillaan käytännössä. Oletetaan, että meillä on seuraava lohko

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

Näytetään tai piilotetaan se ehdolla:

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

Tehdään nyt kaksi painiketta. Ensimmäistä napsautettaessa näytetään lohkomme, ja toista napsautettaessa - piilotetaan:

app/app.component.html<button (click)="show()">
  näytä
</button>
<button (click)="hide()">
  piilota
</button>

Lisätään komponentin luokkaan ominaisuus, joka säätelee sitä, onko lohko näkyvissä vai ei:

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

Ja nyt kirjoitetaan metodiemme toteutus lohkon näyttämiseksi ja piilottamiseksi:

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