In all versions of Angular we are working with single stylesheets for template of a component, since CSS files don't allow dynamic styles to be added directly, we'll use Angular template to write dynamic styles in our template.

[ngStyle] Attribute:

<div [ngStyle]="{width: "30%"}"> </div>

ngStyle takes in an object with style rules in it. This is same as inline styles in html

Adding conditional styles:

<div [ngStyle]="{width: isSomeValueAvailable ? "30%" : "100%"}"> </div>

'isSomeValueAvailable' is coming from the component and can change to either true or false, based on which the width of the div will change as well

Getting complex conditional styles:

<div [ngStyle]="{width: (someNumber * columnWidth) + 'px'}"> </div>

'someNumber' and 'columnWidth' are some numbers result of which would give the pixel width of the div, you can go berserk with this.

Other ways of adding dynamic styles:

<div [style.width]="100%"></div>
<div [style.width]="(someNumber * columnWidth) + 'px'"></div>

Hope this helps.