Reattività delle condizioni in Angular

La reattività funzionerà anche con le condizioni ngIf. Ciò significa che possiamo mostrare o nascondere un blocco in base a ciò che è contenuto nella proprietà della classe.

Proviamo nella pratica. Supponiamo di avere il seguente blocco

<div>
	text
</div>

Mostriamolo o nascondiamolo in base a una condizione:

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

Creiamo ora due pulsanti. Al click sul primo mostreremo il nostro blocco, mentre al click sul secondo - lo nasconderemo:

<button (click)="show()">
	show
</button>
<button (click)="hide()">
	hide
</button>

Aggiungiamo alla classe del componente una proprietà che regolerà se il blocco è mostrato o meno:

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

E ora scriviamo l'implementazione dei nostri metodi per mostrare e nascondere il blocco:

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

Crea un pulsante, il cui click alterni lo stato del blocco: mostrandolo, se è nascosto, e nascondendolo, se è mostrato.