Динамии тағйир додани услубҳо дар Angular

Бо ёрии директиваҳои ngClass ва ngStyle шумо метавонед ифодаҳоро ба элементҳо мебандед, бо ин ёрӣ услубҳои мо динамӣ тағйир хоҳанд ёфт.

Биёед чунон кунем, ки матн пинҳон шавад ё намоиш дода шавад бо ёрии хосияти active класси component:

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

Барои ин функсияи toggle-ро менависем, ки ба таври мутановиб ин хосиятро фаъол ё ғайрифаъол мекунад:

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

Дар файли CSS-и component услуби зеринро ба класс таъин мекунем:

.hidden {
	display: none;
}

Дар template-и component як див месозем, ва ба он CSS класси hidden-ро илова мекунем, ки ба вобастагӣ аз хосияти active аз class-и component фаъол ё ғайрифаъол мешавад:

<div [ngClass]="{hidden: active}">
	матн
</div>

Инчунин як тугма месозем, ки пахш кардани он методи toggle-ро фаро мехонад, component-и моро намоиш дода ё пинҳон мекунад:

<button (click)="toggle()">
	toggle (тағйир додан)
</button>

Се блок дода шудааст. Се тугма созед, ҳар яке аз онҳо блоки худро toggle кунад.