Styling in Angular – ngStyle, ngClass

styling in angular

This article on Styling in Angular is part of the Learning Angular series.

Styling elements Dynamically with ngStyle

<p [ngStyle]="{backgroundColor: getColor()}">

The ngStyle is a directive and has been implemented with the square brackets to make sure that it is bound to the property ngStyle
** More information required

Applying CSS classes Dynamically with ngClass

<p [ngClass]="{online: serverStatus === 'online'}">

In case of ngClass, it will take a list of key-value pairs, where:
key = the class to add
value = the condition

Leave a Reply