Class Binding In Angular

The Code Points July 01, 2022 0

To add or delete classes from HTML components, the Angular Class binding is used. You can conditionally apply CSS Classes to an element, resulting in a dynamically styled element.

Angular supports three methods for adding and removing classes from an element. One that makes use of the DOM ClassName property. The Class shorthand is the second choice. The NgClass directive, which is discussed in a separate article, is the third choice.

Class binding with ClassName

The property name of HTML Element is ClassName. As a result, we may apply the class name to any HTML element using Property binding.

The div element is given the CSS Class red in the example below.

<div [className]="'red'">Test</div>

You can also add many classes by using the comma to separate them.

<div [className]="'red size20'">Test</div>

HTML Class attribute

You can also use the standard HTML method to add classes.

<div class="red">red</div>

However, combining class and [className] removes the class attribute. You can't combine the two.

<div class="red" [className]="'size20'">red</div>

Conditionally apply Classes

We may also dynamically bind the class name.

Create a variable in your component class to begin.

cssStringVar: string= 'red size20';

Then, as seen below, use it in the Template.

<div [className]="cssStringVar">Test</div>

You can write a function that returns the class if a certain condition is met.

getClass() {
  return 'red';
}

after which you should using it in the template as shown below.

<div [className]="getClass()">getClass</div>

The Conditional (Ternary) Operator is used in the following example.

<div [className]="hasError() ? 'red' : 'size20'"> conditonal operator </div>

Class binding with Class

Another option to bind CSS Class to an HTML element is to use a shortcut method.

<div [class.<className>]="condition"></div>

The name of the class to which you want to bind is className.

True or false must be returned by condition. A true return value adds the class, while a false return value removes it.

The class red and size20 are applied to the div element in the following example.

<div [class.red]="true" [class.size20]="true">Test</div>

Conditionally binding class

Create a variable in the component class as shown below to dynamically or conditionally bind a class.

hasError:false;

<div [class.red]="hasError" [class.size20]="hasError">Test</div>

You can also build a hasError() function that returns true or false, as seen below.

hasError() {
   return false
}

And then paste it into the template as indicated.

<div [class.red]="hasError()" [class.size20]="hasError()">Test</div>

Class binding with NgClass

The NgClass directive is another way to add class. It provides more versatility, such as the ability to easily add multiple classes. In Angular, you may learn more about ngClass.

Conclusion

One of the various ways to decorate Angular apps is to use class binding. The following is a comprehensive collection of all articles about angular application styling.

I hope this article helps you and you will like it.👍

If you have any doubt or confusion then free to ask in the comment section.