Binding custom class inside ngClass in Angular

Question

I am trying to bind a class name inside Angular ngClass so that the user will be able to set any class name he likes to the element.

I have the following in my js file and would like to assign this class name to the div element if this.customClass is set.

this.customClass= "list-custom-class";

HTML

<div class="row" [ngClass]="'{{customClass}}'}"></div>

Answer 1

<div class="row {{customClass}}"></div>

No need of using ngClass.

Answer 2

To bind class

<div class="row" [ngClass]="customClass"></div>

please check the below

https://angular.io/api/common/NgClass

Answer 3

You can't use string interpolation in ngClass.Please use below it may help.

[ngClass]="[customClass]"

Answer 4

You can directly use it as class using string interpolation. Need not use ngClass to bind dynamic class through a variable.ngClass can be used in situations where you want to add class based on some conditions etc.,

<span class="align-middle {{sub.sub2_sec_class}}" 
      [ngClass]="sub.isCurrent?'tab-head-icon-selected':'tab-head-icon'"> 
      {{sub.iconName}}
</span>

Here 'sub.sub2_sec_class' is a variable which dynamically populated for every ngFor loop iteration