Angular - 2.24-Dynamic stylization of elements with ngStyle

In the last video, we saw the NGIF directive and noted that it was very useful because it was a structural directive. We also mentioned another type of directives, the attribute directives, which are called so because they look like normal HTML attributes without a star.

We then showed how to add a numerical directive called ngStyle to dynamically change the background color of a component based on the status of the service. We explained that the property link is used to configure this directive, and that it expects to receive a JavaScript object with key-value pairs to define styles.

We created a method called getColor that returns the appropriate background color based on server status, and used this method to set the background color with ngStyle. We noted that ngStyle allows for dynamic updating of styles based on data, which is an important benefit.

Finally, we noted that directives are added as attributes, and that the property link is used to configure them. It is important to understand the difference between directives and property links, which are two distinct concepts.