class binging in angular | custom class binding

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.

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, []="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 []="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 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 TypeSyntaxInput TypeExample Input Values
Single class binding[]="onSale"boolean | undefined | nulltruefalse
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']
class binding


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> 

Leave a Reply