Angularда стилларни динамик ўзгартириш

ngClass ва ngStyle директивалари ёрдамида элементларга ифодаларни боглаш мумкин, бу бизнинг стилларимиз динамик ўзгаришига олиб келади.

Компонент классасининг active xоссаси ёрдамида матн йўқолсин ёки кўрсатилсин:

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

Бунга toggle функциясини ёзамиз, у ўзгармас равишда бу хоссани ўчириб-ёкиб туради:

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

Компонентнинг CSS файлида куйидаги стилни берамиз:

.hidden {
	display: none;
}

Компонент шаблонида див яратамиз ва унга hidden CSS классини қўшамиз, у компонент классасидан active xоссасига қараб ўчади ёки ёнади:

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

Тугмача яратамиз, уни босганда toggle методи чақирилади ва бизнинг компонентимиз кўринади ёки йўқолади:

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

Учта блок берилган. Ҳар бири ўз блокани ўзгартирадиган учта тугмача яратинг.