Applying style or CSS classes to any element dynamically in angular is an important feature and makes an application flexible and powerful.
There are different methods in which styles can be applied to elements in angular and this article shall discuss them with examples.
1. style attribute
With style attribute you can apply CSS properties to an element. These properties may be fixed or applied dynamically based on some condition.
With this method, you write the property name prefixed with style. enclosed between square brackets and assign it the required value. Example,
<div [style.color] = “red” />
This code assigns the color property of style object to a fixed value. For making it dynamic, the value can be assigned using a ternary operator. Example,
<div [style.color] = ” isClicked ? ‘red’ : ‘blue’ “/>
where isClicked is a property in component class. If the value of this property is true, the color will be red, else it will be blue.
An expression can also be used in placed of a property. This expression should evaluate to either true or false. Example,
<div [style.color] = ” checked == ‘Y’ ? ‘red’ : ‘blue’ ” />
Style attribute syntax resembles the syntax of property binding in angular in that it assigns the property of style object to some value.
Problem with style attribute is that if you want to apply multiple properties to an element, then separate style attributes are required. Example,
<div [style.color] = “red” [style.width] = “50%” [style.background-color] = “blue” />
If there are many different styles on different elements, then this method should be avoided and ngStyle or ngClass directives(discussed next) should be used.
2. ngStyle attribute
If you want to apply multiple styles at once, then ngStyle directive should be used.
All the styles or CSS properties that need to be applied are supplied as an object. Example,
<div [ngStyle] = { ‘backgroundColor’ : ‘red’, ‘width’ : ‘50%’ } />
Note that the style property that needs to be applied can be in CSS format or javascript format. That is, both backgroundColor and background-color are valid.
Moreover, each CSS property or style can be dynamic, meaning it can be applied based on some condition. This condition is provided using a ternary operator. Example,
<div [ngStyle] = { ‘backgroundColor’ : isRated ? ‘red’ : ‘grey’,
‘width’ : selected == ‘Y’ ? ‘50%’: ‘100%’ } />
In the above example, if isRated property in component class will be true, then backgroundColor will be red, otherwise it will be grey.
Similarly, if selected property is Y, then width will be 50%, else 100%.
It is also possible to write the object given to ngStyle in the component class rather than writing it in HTML template. Thus, below template is also valid.
<div [ngStyle] = “styleObject” />
where styleObject is a property in component class as below.
public styleObject = “{ ‘backgroundColor’ : ‘red’,
‘width’ : ‘50%’ }”;
3. className directive
className directive lets you add CSS class to an element. The class can be added in a static manner or you can add classes dynamically based on a condition. Example,
<div [className] = ” ‘active’ ” />
Notice the single quotes around the name of class. Below example shows how to add dynamic classes.
<div [className] = ” isActive ? ‘active’ : ‘not-active’ ” />
where isActive is a property in component class. If the property is true, then class active is added to the element, otherwise the class added will be not-active.className directive can not be used to add more than one CSS classes to an element.
4. ngClass directive
Another way to add CSS classes to elements in angular is by using ngClass directive. This directive lets you
specify classes statically and dynamically
Add more than one classes to the same element in one go.
There are many different methods in which classes can be applied using ngClass directive. Examples are
<!– More than one classes directly –>
<div [ngClass] = ” ‘active’ ‘rate’ ” />
<!– Supplying an array of classes –>
<div [ngClass] = ” [ ‘active’, ‘rate’ ] ” />
<!– Applying different classes based on different conditions –>
<div [ngClass] = ” { ‘active’ : condition, ‘rate’ : condition } ” />
<!– Applying different classes based on same condition –>
<div [ngClass] = ” { ‘active rate’ : condition } ” />
In the above examples, if you specify a condition, then it should evaluate to true or false. If the condition is true, then the class(es) will be applied else not.
Examples of applying CSS classes conditionally are given below
<!– Applying different classes based on different conditions –>
<div [ngClass] = ” { ‘active’ : isActive, ‘rate’ : true } ” />
In this example, the class active will be applied only when the property isActive will be true while the class rate will always be applied since the result is true.
<!– Applying more than one classes based on same condition –>
<div [ngClass] = ” { ‘active rate’ : apply == ‘Y’ } ” />
In this example, both active and rate classes will be added if the apply property will be Y.
5. class binding
Class binding in angular means adding CSS class to an element based on some condition. If the condition evaluates to true, then class is added otherwise not.
Its syntax is different from className and ngClass directives discussed earlier. In class binding, the class to be added is preceded with class. as shown below.
<div [class.active] = “condition” />
As per above syntax, class active will be applied if the condition is true. Example,
<div [class.active] = ” isActive == ‘Y’ ” />
The syntax of class binding it similar to the style attribute explained in Method 1 and it can be used to add only 1 class at a time.
If the element already has some classes added to it and another class is added using class binding, then the new class is also added to existing classes. That is,
<div class = ” visited touched ” [class.active] = ” isActive == ‘Y’ ” />
will render the element as
<div class = “visited touched active” />
if the property isActive is Y.
Hope the methods to apply style dynamically to elements outlined in this article would be useful.