Angular sharoitlarida reaktivlik

Reaktivlik shartlar bilan ham ishlaydi ngIf. Bu shuni anglatadiki, biz klass xususiyatida nima mavjudligiga qarab blokni ko'rsatishimiz yoki yashirishimiz mumkin.

Keling, amalda sinab ko'raylik. Faraz qilaylik, bizda quyidagi blok mavjud

<div>
	matn
</div>

Keling, uni shartga qarab ko'rsatamiz yoki yashiramiz:

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

Endi ikkita tugma yarataylik. Birinchi tugma bosilganda blokimiz ko'rsatilsin, ikkinchi tugma bosilganda - yashirilsin:

<button (click)="show()">
	ko'rsatish
</button>
<button (click)="hide()">
	yashirish
</button>

Keling, komponent klassiga blok ko'rsatiladimi yoki yo'qmi, buni boshqaradigan xususiyat qo'shamiz:

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

Endi blokni ko'rsatish va yashirish uchun uslublarimizni amalga oshiramiz:

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

Blokni almashtirib turadigan tugma yarating: agar u yashiringan bo'lsa, ko'rsating, agar ko'rsatilgan bo'lsa, yashiring.