Reaktiviteti i Kushteve në Angular

Reaktiviteti do të funksionojë gjithashtu me kushtet ngIf. Kjo do të thotë se ne mundemi të shfaqim ose fshehim një bllok në varësi nga ajo që përmban në vetinë e klasës.

Le të provojmë në praktikë. Le të themi se kemi bllokun e mëposhtëm

<div>
	text
</div>

Le ta shfaqim ose fshehim atë sipas kushtit:

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

Të krijojmë tani dy butona. Me klikim në të parën do ta shfaqim bllokun tonë, ndërsa me klikim në të dytën - do ta fshehim:

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

Le të shtojmë në klasën e komponentit një veti që do të rregullojë nëse blloku është i shfaqur apo jo:

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

Dhe tani le të shkruajmë implementimin e metodave tona për shfaqjen dhe fshehjen e bllokut:

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

Krijoni një buton, klikimi i të cilit do të ndërrojë (toggle) bllokun: ta shfaq nëse është i fshehur, dhe ta fsheh nëse është i shfaqur.