How to get a value from a component and use it in ngClass in angular

Question

I have this component here:

import { Component } from '@angular/core';
@Component({
    selector: 'component-a',
    templateUrl: '../html/componenta.html'
})
export class ComponetA {
 color_class:string = "red_bg";
}

My css for .red_bg is:

.red_bg{background-color:red}

Now, in my componenta.html, when I attach the class to a button using ngClass, it works perfect, here is the snippet <button [ngClass]="{'red_bg': 1===1}">Click</button> My question is how do I use ngClass and get the value of the class name from the component? Here is what I tried but didn't work: <button [ngClass]="{color_class: 1===1}">Click</button> I also tried interpolating this way <button [ngClass]="{'{{color_class}}': 1===1}">Click</button> but still didn't work. Thanks in advance

Possible duplicate of [Dynamic classname inside ngClass in angular 2](https://stackoverflow.com/questions/37090877/dynamic-classname-inside-ngclass-in-angular-2) — anoop, May 30 '17 at 09:03

score 2 · Accepted Answer · answered May 30 '17 at 09:02

You can do it in below way:

HTML

<div [ngClass]="getCSSClass('someExpression')">
</div>

TS

getCSSClass(flag:string) {
  let cssClass;

  if(flag == 'one') {  
     cssClass = {
       'one': true
     }  
  } else {  
     cssClass = {
       'two': true 
     }  
  }
  return cssClass;
}

TK Omble · Answer 2 · 2017-05-30T09:19:22.097

1

I know that these works:

<button [ngClass]="color_class">Click</button>

or

<button [className]="color_class">Click</button>

or

<button [class]="color_class">Click</button>

edited May 30 '17 at 09:19

answered May 30 '17 at 09:12

TK Omble

369
3
8

How to get a value from a component and use it in ngClass in angular

2 Answers2