Angular Basic level interview question — What is class and style binding in angular ?

Anil Kumar
May 24, 2023


Binding — I have explained basic level binding please read it if not clear,

Now we will understand these binding types class and style used for css addition and remove

Class binding

For dynamically adding and removal class in given example below based on conditions or expression

Single class

<span [class.amount]="isAmount"> 45 </span>

Multiple class

<span [class]="expression"> 45 </span>

<span [class]="{amount: isAmount, decimal: isDecimal}"> 45 </span>

Style binding

to bind style in tags directly and conditions accordingly

<span [style.width]="myScore"> 45 </span>