Styling the Component
Learn how to apply static and dynamic styling on Angular components.
We'll cover the following...
Styles in a web application can be applied using either the class or style attribute of an HTML element:
Press + to interact
<p class="star"></p><p style="color: greenyellow"></p>
Class and style bindingsĀ
The Angular framework provides two types of property binding to set both of them dynamically, class binding and style binding. We can apply a single class to an HTML element using the following syntax:
Press + to interact
<p [class.star]="isLiked"></p>
In the preceding snippet, the star class will be added to the paragraph element when the isLiked expression is true. Otherwise, it will be removed from the element. If we want to apply multiple classes simultaneously, we can use the ...