Difference between [ngClass] vs [class] binding

angular single-page-application angular2-directives angular-ng-class
Ben Taliadoros picture Ben Taliadoros · Jul 26, 2017 · Viewed 27.2k times · Source

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

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

Answer

G&#252;nter Z&#246;chbauer picture Günter Zöchbauer · Jul 26, 2017

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.

Related questions

Could not find the implementation for builder @angular-devkit/build-angular:dev-server on ng serve command

I tried to update the angular CLI following this, but now I can't run my app. When I try to run the command ng serve, it gives me this error: Could not find the implementation for builder @angular-devkit/build-angular:dev-server …

Read More
"Please add a @NgModule annotation" Error on Angular2

I have made a custom angular2(5.0.x) module that looks like this : import { GuageService } from './services/guage.service'; import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { GuageComponent } from './guage/guage.component'; @NgModule({ declarations: […

Read More
Deploy single page application Angular: 404 Not Found nginx

I Have an Angular application. I run the command ng build --prod --aot to generate the dist folder. In the dist folder I created a file named Staticfile then I uploaded the dist folder to pivotal.io with the following …

Read More