Reactivitatea condițiilor în Angular

Reactivitatea va funcționa și cu condițiile ngIf. Aceasta înseamnă că putem afișa sau ascunde un bloc în funcție de conținutul proprietății clasei.

Să încercăm în practică. Să presupunem că avem următorul bloc

<div>
	text
</div>

Să îl afișăm sau să îl ascundem după o condiție:

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

Să creăm acum două butoane. La click pe primul vom afișa blocul nostru, iar la click pe al doilea - îl vom ascunde:

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

Să adăugăm în clasa componentei o proprietate care va regla dacă blocul este afișat sau nu:

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

Și acum să scriem implementarea metodelor noastre pentru afișarea și ascunderea blocului:

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

Creați un buton, a cărui apăsare va comuta blocul: să îl afișeze, dacă este ascuns, și să îl ascundă, dacă este afișat.