Бастанидани синфҳои CSS дар Angular

Дар Angular метавон истифодаи синфи CSS-ро барои блок фаъол ё ғайрифаъол кард. Ин бо ёрии атрибути тег, ки ба формати зерин навишта шудааст, иҷро карда мешавад:

[class.номи_синф]="рост ё дурӯғ"

Биёед амалан бубинем. Фарз мекунем, ки мо синфҳои зеринро дорем:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Биёед бо мисолҳо бубинем, чӣ гуна ин синфҳоро барои блок фаъол ва ғайрифаъол кардан мумкин аст.

Мисол

Як синфро фаъол ва дигареро ғайрифаъол мекунем:

<div [class.blue]="true" [class.bold]="false">
	матн
</div>

Мисол

Фарз мекунем, ки ҳолатҳои синфҳо дар хосиятҳои синф нигоҳ дошта мешаванд:

export class AppComponent {
	public isBlue: boolean = true;
	public isBold: boolean = false;
}

Диданишавии синфро вобаста ба қиматҳои хосиятҳои худ мебастем:

<div [class.blue]="isBlue" [class.bold]="isBold">
	матн
</div>

Масъалаҳои амалӣ

Синфи CSS-и зерин дода шудааст:

.hidden {
	visibility: hidden;
}

Ин синфро ба блок бастед. Тугмае созед, ки пахш кардани он блокро пинҳон ё нишон медиҳад.