11

HTML: 

<button class="sa-button" [ngClass]="'buttonClass'">{{displayText}}</button>

The variable I expect to bind to in my typescript file: 

public buttonClass = "button";

The error I get:

Can't bind to 'ngClass' since it isn't a known property of 'button'

I want to bind a variable which holds the name of the css class I want to apply.

Is there a correct way to do this? I literally copied this out of the angular docs, and it doesn't work.

Mathis Perrier
  • 21
  • 7
BentOnCoding
  • 27,307
  • 14
  • 64
  • 92
  • 19
    If the component under the root module make sure that **BrowserModule** is imported. If it is in a child module import **CommonModule**. These imports being missing will give you that error when trying to use common directives. – JayChase Dec 01 '16 at 04:59
  • 2
    Dup of http://stackoverflow.com/questions/40642827/cant-bind-to-ngfor-error/40642843#40642843 – Günter Zöchbauer Dec 01 '16 at 06:09
  • 5
    JayChase is correct. The Angular docs assume you have all of your components inserted into a single module. So if your app is modularized and you don't have the proper angular module imports, then `ngClass` won't work as expected. – BrianRT Jan 27 '17 at 19:13
  • 3
    JayChase's solution doesn't work for me. CommonModule is imported, still receive the ngClass error. – Tyguy7 Jul 18 '17 at 17:21

1 Answers1

2

by adding the single quotes, you are passing in the text in the single quotes.

You want to remove them like so...

<button class="sa-button" [ngClass]="buttonClass"  >{{displayText}}</button>

Fro more on ngClass, check out the docs

Chris Noffke
  • 317
  • 1
  • 7