primary, accent, ... являются классами, поэтому вам нужно использовать ngClass или class.primary
<span [ngClass]="variable">...</span>
//and
variable='myClass'
//or
<span [ngClass]="{'primary':condition}">...</span>
//or
<span [class.primary]="condition">...</span>
Вы используете [ngStyle] или [style.property] способом
<span [ngStyle]="myStyle">..</span>
e.g.
myStyle={'background-color':red,width:'1rem'}
//or
<span [ngStyle]="{color:variable}">...</span>
//and
variable='red'
//or
<span [style.color]="'red'">...</span>
//or
<span [style.color]="variable">...</span>
//and
variable='red'
вы можете увидеть больше примеров, например, эта ссылка