Difference between [ngClass] vs [class] binding

Question

What is the difference in Angular 2 between the following snippets:

<div [class.extra-sparkle]="isDelightful">
<div [ngClass]="{'extra-sparkle': isDelightful}">

Answer 1

This is special Angular binding syntax

<div [class.extra-sparkle]="isDelightful">

This is part of the Angular compiler and you can't build a custom binding variant following this binding style. The only supported are [class.xxx]="...", [style.xxx]="...", and [attr.xxx]="..."

ngClass is a normal Angular directive like you can build it yourself

<div [ngClass]="{'extra-sparkle': isDelightful}">

ngClass is more powerful. It allows you to bind a string of classes, an array of strings, or an object like in your example.

Answer 2

The above two lines of code is with respect to CSS class binding in Angular. There are basically 2-3 ways you can bind css class to angular components.

You provide a class name with class.className between brackets in your templates and then an expression on the right that should evaluate to true or false to determine if the class should be applied. That is the below one where extra-sparkle(key) is the css class and isDelightful(value).

<div [class.extra-sparkle]="isDelightful">

When multiple classes should potentially be added, the NgClass directive comes in really handy. NgClass should receive an object with class names as keys and expressions that evaluate to true or false. extra-sparkle is the key and isDelightful is the value (boolean).

<div [ngClass]="{'extra-sparkle': isDelightful}">

Now along with extra sparkle, you can glitter your div also.

<div [ngClass]="{'extra-sparkle': isDelightful,'extra-glitter':isGlitter}">

or

export class AppComponent {
    isDelightful: boolean = true;
    isGlitter:  boolean = true;
    
    get sparkleGlitter()
    {
        let classes = {
            extra-sparkle: this.isDelightful,
            extra-glitter: this.isGlitter
        };
        return classes;
    }
}

<div [ngClass]='sparkleGlitter'>

For ngClass, you can have conditional ternary operators too.

Answer 3

In the current version of Angular following syntax is also working fine:

[class]="{toggled: sidebarActive, test: true,test1: sidebarActive}

So to my understanding, there is no difference between using ngClass and [class] binding?

Example

Answer 4

Using [ngClass] you're able to apply multiple classes in a really convenient way. You can even apply a function that will return an object of classes. [class. makes you able to apply only one class (of course you can use class. a few times but it looks really bad).

Answer 5

In [ngClass] you can add one of two different classes like this:

<div [ngClass]="a === b ? 'class1' : 'class2'">

Answer 6

After going through multiple answers, I thought to add my view as this might be helpful.

So, Angular is planning to remove [ngClass] and [ngStyle] directives in their future releases.

As of now (Angular-v13), [class] binding supports to add multiple css classes. Though there are some feature gaps when compared with [ngClass]. You can check this - https://github.com/angular/angular/issues/40623

[ngClass]

<p [ngClass] = “‘addGreen’”> Hello World </p> 
<p [ngClass] = “[‘addGreen’, ‘addFont’, ‘addBg’]”> Hello World </p>
<p [ngClass] = “{ addGreen: true, addBg: true, addFont: false }”> Hello World </p> 
<p [ngClass] = “{ addGreen addBg: true, addFont: false}”> Hello World </p>

[class]

<p [class] = “‘addGreen’”> Hello World </p> 
<p [class] = “[‘addGreen’, ‘addFont’, ‘addBg’]”> Hello World </p>
<p [class] = “{ addGreen: true, addBg: true, addFont: false }”> Hello World </p> 

Note : The below way of adding the multiple classes is not possible

<p [class] = “{ addGreen addBg: true, addFont: false}”> Hello World

Answer 7

Yes, with help of class binding ([class]) also we can attach multiple css classes with latest versions. ex:[class]='{object with key as class name and value as true/false}' same like [ngClass] so..there is no difference between [class] binding and inbuilt [ngClass] directive

Answer 8

No one has mentioned that if you use both [class] and [ngClass] bindings some confusion can occur once you try to pass some class string to [class] that is 'registered' by [ngClass]. They can compete.

E.g. this will not assign the 'd-flex' class value to the [class] binding as long as an [ngClass] condition which is associated with this class has evaluates to true:

component.html

<div [ngClass]="{'d-flex': falseCondition}" [class]="getClassBasedOnCondition()">

component.ts

public getClassBasedOnCondition(): string {
    return trueCondition ? 'd-flex' : '';
}

You can use [class.] instead of [ngClass] to avoid such behavior, as long as you don't have multiple classnames there, such as [ngClass]="{'d-flex p-1': condition}"