Şərtlərin reaktivliyi Angular-da

Reaktivlik həmçinin ngIf şərtləri ilə də işləyəcək. Bu o deməkdir ki, biz bloku klas xassəsində nəyin olduğundan asılı olaraq göstərə və ya gizlədə bilərik.

Gəlin praktikada sınayaq. Tutaq ki, bizdə aşağıdakı blok var

<div>
	text
</div>

Gəlin onu şərtə görə göstərək və ya gizlədək:

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

İndi iki düymə edək. Birinciyə kliklədikdə blokumuzu göstərək, ikinciyə kliklədikdə isə gizlədək:

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

Gəlin komponentin klasına blokun görsəndiyi və ya gizləndiyini tənzimləyən xassə əlavə edək:

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

İndi isə bloku göstərmək və gizlətmək üçün metodlarımızın realizasiyasını yazaq:

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

Bloku dəyişdirən bir düymə edin: gizlidirsə göstərsin, görsənirsə gizlətsin.