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

<div>
	teksti
</div>

Näytetään tai piilotetaan se ehdolla:

<div *ngIf="isShow">
	teksti
</div>

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

<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:

export class AppComponent {
	public isShow: boolean = true;
}

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

export class AppComponent {
	public isShow: boolean = true;
	
	public show(): void {
		this.isShow = true;
	}
	public hide(): void {
		this.isShow = false;
	}
}

Tee painike, jonka napsautus toggle-oi lohkon: näyttää, jos se on piilotettu, ja piilottaa, jos se on näkyvissä.