How to use ngClass on many elements with variable in ts

Question

I have a variable in my ts file that toggles when a button is clicked:

expanded: boolean = false;

  expandStuff() {
    this.expanded = !this.expanded;
    }

I have a few divs that I want this toggle to affect and change the class of the div. So I thought I could use ngClass:

[ngClass]="{'max-stuff' : expanded}"

I added only this to the divs I want to be affected. But I have been unable to get it to work. Literally nothing happens. What am I doing wrong? Do I need to add something else? Is my syntax incorrect?

Looks okay with the code. Anyway, can you create a Minimal Reproducible Example on [Stackblitz](https://stackblitz.com)? So we can know the structure of your code and the root cause. — Yong Shun, Jun 29 '21 at 09:05
As Yong stated, this should work fine. Probably something else going on. Either create a stackblitz or post more surrounding code. — MikeOne, Jun 29 '21 at 09:17
I discovered it won't work if I have a style the class would affect set inline already. makes sense really :) — Ree, Jun 29 '21 at 14:39

score 0 · Answer 1 · answered Jun 29 '21 at 09:04

If it's a root component, have you imported BrowserModule?

If it's a child component, have you imported CommonModule?

As an example

import {BrowserModule} from "@angular/platform-browser"

@NgModule({
    imports: [BrowserModule]
})
export class SomeModule {}

How to use ngClass on many elements with variable in ts

1 Answers1