html – ngClass not reacting to function updating variable


I am applying a light and dark theme using ngClass but it is not reacting to the function updating the boolean value.

When the typescript function is triggered, it prints out the correct updated value of dark_active but the class is not applied. When I update the slide toggle the classes are updating correctly.
Why does updating the value in the function not work?

    <div
     id="activity_row_light"
     [ngClass]="{ 'dark-theme-mode': dark_active }"
     class="row my-row report-show">
       <mat-slide-toggle [(ngModel)]="dark_active"
       ></mat-slide-toggle>....





toggleVisionMode(value: any) {
    this.darkLightMode = localStorage.getItem('mode');
    if (this.darkLightMode == 'light') {
      value = 1;    }

    if (value == 0) {
      //Dark
      localStorage.setItem('mode', 'dark');
      this.dark_active = true;

    } else if (value == 1) {
      //Light
      localStorage.setItem('mode', 'light');
      this.dark_active = false;
    }
    console.log(this.dark_active)
  }
}



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here