Reaktivitet av villkor i Angular

Reaktivitet fungerar också med villkor ngIf. Det betyder att vi kan visa eller dölja ett block beroende på vad som finns i klassens egenskap.

Låt oss prova i praktiken. Låt oss anta att vi har följande block

<div>
	text
</div>

Låt oss visa eller dölja det baserat på ett villkor:

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

Låt oss nu skapa två knappar. Vid klick på den första ska vi visa vårt block, och vid klick på den andra - dölja det:

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

Låt oss lägga till en egenskap i komponentklassen som kommer att styra om blocket är synligt eller inte:

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

Och nu skriver vi implementationen av våra metoder för att visa och dölja blocket:

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

Skapa en knapp, där ett klick på den kommer att växla blocket: visa det om det är dolt, och dölja det om det är synligt.