A feltételek reaktivitása az Angular-ban

A reaktivitás a ngIf feltétellel is működni fog. Ez azt jelenti, hogy egy blokkot megjeleníthetünk vagy elrejthetünk attól függően, hogy mit tartalmaz az osztály egy tulajdonsága.

Próbáljuk ki gyakorlatban. Tegyük fel, hogy van a következő blokkunk

<div>
	szöveg
</div>

Jelenítsük meg vagy rejtsük el feltétel alapján:

<div *ngIf="isShow">
	szöveg
</div>

Készítsünk most két gombot. Az elsőre kattintva jelentsük meg a blokkot, a másodikra kattintva pedig rejtsük el:

<button (click)="show()">
	megjelenít
</button>
<button (click)="hide()">
	elrejt
</button>

Adjunk hozzá az osztályhoz egy tulajdonságot, ami szabályozza, hogy a blokk látható-e vagy sem:

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

És most írjuk meg a blokk megjelenítéséhez és elrejtéséhez szükséges metódusaink implementációját:

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

Készítsen egy gombot, amire kattintva a blokk átvált: megjelenik, ha el van rejtve, és elrejtődik, ha meg van jelenítve.