As you probably have guessed already, this directive allows us to bind CSS styles by evaluating a custom object or expression. We can bind an object whose keys and values map CSS properties, or just define specific properties and bind data to them:

<p [ngStyle]="{ 'color': myColor, 'font-weight': myFontWeight }">
  I am red and bold
</p>

If our component defines the myColor and myFontWeight properties with the red and bold values, respectively, the color and weight of the text will change accordingly. The directive will always reflect the changes made within the component, and we can also pass an object instead of binding data on a per property basis:

<p [ngStyle]="myCssConfig">I am red and bold</p>