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

Question

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.

Answer 1

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