Difference between [ngClass]="computeClass()" and class="{{computeClass()}}" in Angular 4

Question

What is the difference when computing class using ngClass and directly computing class using the HTML class attribute in Angular 4.

[ngClass]="computeClass()"

and

class="{{computeClass()}}"

computeClass() {
  if (condition) {
    return 'class-a';
  } else {
    return 'class-b';
  }
}

Both returns the same result. How does this impact on the performance?

Edit: My question is different from the question marked as duplicate as it compares [ngClass] and [class] whereas, the above comparison is between [ngClass] and class.

Possible duplicate of [Angular \[ngClass\] vs \[class](https://stackoverflow.com/questions/45321526/angular-ngclass-vs-class) — Muhammet Can TONBUL, Sep 28 '18 at 13:39
Thanks for the suggestion Amit. I had set my change detection to ChangeDetectionStrategy.OnPush — Swadeesh, Sep 28 '18 at 13:43
That is just another change detection that you perform manually after angular has initiated the change detection. That might not solve the problem. — Amit Chigadani, Sep 28 '18 at 13:44
@MuhammetCanTONBUL i don't think it's the same question tho...similar but is not the same — Patricio Vargas, Sep 28 '18 at 13:47

score 0 · Answer 1 · answered Sep 28 '18 at 13:44

You are talking about Interpolation and Property Binding.

Both will give you same result.

Interpolation

Interpolation is a special syntax that Angular converts into property binding. It’s a convenient alternative to property binding.

For Ex :

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<div>
                    <h1>{{citedExample}}</h1>
                    <img src=' https://angular.io/{{imagePath}}'/>
                </div>`
})
export class AppComponent {
    citedExample: string = 'Interpolation';
    imagePath: string = 'assets/images/logos/angular/logo-nav@2x.png';
}

Property Binding

Property Binding to set an element property to a non-string data value, you must use property binding.

For Ex :

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<div>
    <button [disabled]='isDisabled'>Try Me</button>
                     </div>`
})
export class AppComponent {
isDisabled: boolean = true;
}

If we decide to use interpolation instead of property binding, the button will always be disabled irrespective of isDisabled class property value is true of false.

score 0 · Answer 2 · answered Sep 28 '18 at 13:50

Take a look at the documentation of ngClass here.

From angular docs:

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.

As you can see ngClass takes different types of arguments. If you just pass a string, this css class will be attached to the HTML element. The same way when you use interpolation (as mentioned by Shashikant Devani).

However ngClass can do much more. If you pass an object in example you can add multiple css classes conditionally.

It works like this if we apply this to your example:

computeClass() {
  return {
     "class-a": condition,
     "class-b": !condition
  };
}

This is a normal javascript object. classA will only be added if conditionA is true and the same applies to classB. If you want to learn more about the possibilities of ngClass take a look at the documentation.

score 0 · Answer 3 · answered Sep 28 '18 at 14:56

This class="{{computeClass()}}" or [class]="computeClass()" is a property binding it just accept string value as name of class or list of classes like this below

class="class1 class2"

and the you do something like this

[class]="condition ? 'class-a' : 'class-b'"

as far both why will retern string value

NgClass is an build in angular directive based on the input will set the class attribute can accept this list of values

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.

an example of ngClass

[ngClass]="condition ? 'class-a' : 'class-b'"
[ngClass]="{'class-a' :condition ,'class-b':!condition"}

is your case both are acceptable but some advanced cases you will find ngClass is more probate to use and consider a best practices to handle add or remove class

Difference between [ngClass]="computeClass()" and class="{{computeClass()}}" in Angular 4

3 Answers3