Generate dynamic css based on variables angular

I'm trying to generate a dynamic css using values from json, I tried with following code in main component but its not working

@Component({
templateUrl: 'card.html',
styles: [`
.card {
height: 70px;
width: 100px;
color: {{css.cardColor}};
}
`],
})


How to we reference property values inside the styles declaration?

Edit : can not use ngStyle as its going to be applied on almost all elements as its for whole application and not only for specific element.

Continue reading...