Angular-da stillarni dinamik o'zgartirish

ngClass va ngStyle direktivalari yordamida iboralarni elementlarga bog'lash mumkin, bu esa bizning stillarimizni dinamik o'zgartiradi.

Keling, matn komponentning active xususiyati yordamida yashiriladigan yoki ko'rsatiladigan qilaylik:

export class AppComponent {
	active: boolean = true;
	
	toggle() {
		this.active = !this.active;
	}
}

Buning uchun toggle funksiyasini yozamiz, bu funksiya navbatma-navbat ushbu xususiyatni yoqiq yoki o'chiradi:

export class AppComponent {
	active: boolean = true;
	
	toggle() {
		this.active = !this.active;
	}
}

Komponentning CSS faylida quyidagi uslubni klassga belgilaymiz:

.hidden {
	display: none;
}

Komponentning andozasida div yaratamiz va unga CSS klass hidden ni qo'shamiz, bu klass komponent klassidagi active xususiyatiga qarab yoqiladi yoki o'chadi:

<div [ngClass]="{hidden: active}">
	matn
</div>

Shuningdek, tugma yaratamiz, unga bosilganda toggle metodi chaqiriladi va komponentimizni ko'rsatadi yoki yashiradi:

<button (click)="toggle()">
	almash
</button>

Uchta blok berilgan. Har biri o'z blokini almashtiradigan uchta tugma yarating.