Difference between [ngClass] vs [class] binding

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

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.

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).

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

<div [ngClass]='sparkleGlitter'>

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).

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

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

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

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}"

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

Hello World