Вобаста кардани услубҳои CSS дар Angular

Дар Angular инчунин мумкин аст, ки бевосита услубҳоро барои блок илова намоем. Ин бо кумаки атрибути тег, ки ба формати зерин навишта шудааст, анҷом дода мешавад:

[style.styleProperty]="арзиши хусусият"

Дар ин ҳол, номҳои хусусиятҳои CSS, ки дар дохили худ тире доранд, дар ҳолати мо ба camelCase навишта мешаванд. Биёед бо мисолҳо бубинем, ки ин чӣ гуна кор мекунад.

Мисол

Барои элемент замини тасвир муайян кунем:

<div [style.backgroundColor]="'blue'">
	матн
</div>

Мисол

Фарз кунем, ки мо як хусусияти муайян дорем, ки ранги заминро дар бар мегирад:

export class AppComponent {
	public value: string = 'red';
}

Ин хусусиятро ҳамчун арзиш барои услуб истифода барем:

<div [style.backgroundColor]="value">
	матн
</div>

Мисол

Фарз кунем, ки мо як хусусияти булӣ дорем:

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

Мо арзишҳои гуногуни хусусияти CSS-ро вобаста ба мундариҷаи хусусияти булӣ мебастем. Барои ин аз оператори сегона истифода мебарем:

<div [style.backgroundColor]="isActive ? 'blue' : 'red'">
	матн
</div>

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

Блок дода шудааст. Чореро муаррифӣ намоед, ки клики аввал ба блок онро ба ранги сурх ранғ мезад, ва клики дуюм - ба ранги сабз.

Блок дода шудааст. Тугма дода шудааст. Чореро муаррифӣ намоед, ки фишурдани тугма бараи блокро ду баробар меафзуд.