The angular class binding help to add or remove in our html on the basis of our condition. To achieve this we have various way. Let see the possible option.
Table of Contents
Class binding with class
Use class binding to add and remove CSS class names from an element’s class attribute.
1. Binding to a single CSS class
To create a single class binding, use the prefix class followed by a dot and the name of the CSS class—for example, [class.sale]="onSale". Angular adds the class when the bound expression, onSale is truthy, and it removes the class when the expression is falsy—with the exception of undefined.
<div [class.<className>]="condition"></div>className: Any class which you want to use.
condition: The condition on which you want to apply the class. it wither true|false|undefined|null condition.
Example: <div [class.red]="4 > 3"></div>2. Binding to multiple CSS classes
To bind to multiple classes, use [class] set to an expression—for example, [class]="classExpression". The expression can be one of:
- A space-delimited string of class names.
- An object with class names as the keys and truthy or falsy expressions as the values.
- An array of class names.
<div [class]="classExpression"></div>Example:
Example 1.
<div [class]="my-class-1 my-class-2 my-class-3"></div>
Example 2:
<div [class]="my-class-1"></div>
Example 3:
<div [class]="['my-class-1', 'my-class-2']"></div>
Example 4:
<div [class]="{'my-class-1': true, 'my-class-2': false}"></div>| Binding Type | Syntax | Input Type | Example Input Values |
|---|---|---|---|
| Single class binding | [class.sale]="onSale" | boolean | undefined | null | true, false |
| Multi-class binding | [class]="classExpression" | string | "my-class-1 my-class-2 my-class-3" |
Record<string, boolean | undefined | null> | {foo: true, bar: false} | ||
Array<string> | ['foo', 'bar'] |
NgClass
Adds and removes CSS classes on an HTML element.
The CSS classes are updated as follows, depending on the type of the expression evaluation:
string– the CSS classes listed in the string (space delimited) are added,Array– the CSS classes declared as Array elements are added,Object– keys are CSS classes that get added when the expression given in the value evaluates to a truthy value, otherwise they are removed.
<some-element [ngClass]="'first second'">...</some-element>
<some-element [ngClass]="['first', 'second']">...</some-element>
<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>
<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>
<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>
<some-element [ngClass]="val > 10 ? 'red' : 'green'">...</some-element>Class binding with ClassName:
The ClassName is the property name of HTML Element. Hence we can make use of Property binding to assign the class name to any HTML element.
<div [className]="my_class1"></div>
<div [className]="my_class1 myclass_2"></div>We cannot use both class and className together. If we will use it then class attribute will remove.
<div class="abc" [className]="my_class1"></div>
