Angular View binding not updating with simple boolean

Question

Goodday, This is probably a nooby question but I can't get it to work.

I have a simple service which toggles an boolean, if the boolean is true the class active should appear on my div and if false no class.. Simple as that. But the boolean gets updated, but my view doesn't react to it. Do I somehow have to notify my view that something has changed ?

Service:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ClassToggleService {

    public menuActive = false;

    toggleMenu() {
      this.menuActive = !this.menuActive;
    }
}

View (left menu component):

 <div id="mainContainerRightTop" [class.active]="classToggleService.menuActive == true">

Toggle point (top menu component):

<a id="hamburgerIcon" (click)="classToggleService.toggleMenu()">

try simply by "[class.active]="classToggleService.menuActive" — Pardeep Jain
– Pardeep Jain, Commented Nov 22, 2018 at 7:45
I tried this, but this didn't work so as a test i wrote it out fully by using == true — Roboneter
– Roboneter, Commented Nov 22, 2018 at 7:58

Keryanie · Accepted Answer · 2018-11-22 08:35:33Z

3

This because you are changing a value on a service not on the component, so Angular don't need to update the component, because it did not change. If you want to update the view of your component when a service element is modified, you have to use an Observables and Subjects, and subscribe to them. In this way when the element is changed, it automatically notify all the subscribed components.

@Injectable({
  providedIn: 'root'
})
export class ClassToggleService {

    public menuSubject: Subject<boolean> = new BehaviorSubject<boolean>(false);
    public menuActive = this.menuSubject.asObservable();
    toggleMenu(val : boolean) {
      this.menuSubject.next(val);
    }
}

And in your component just implement OnInit interface and subcribe to the observable in the your service:

public localBool = false;
ngOnInit() {
   this._myService.menuActive.subscribe(value => this.localBool = value);
}
ComponentToggleMenu() {
   this._myService.toggleMenu(!this.localBool);
}

Then your html:

    <div id="mainContainerRightTop" [class.active]="localBool">
   <a id="hamburgerIcon" (click)="ComponentToggleMenu()">

edited Nov 22, 2018 at 8:35

answered Nov 22, 2018 at 8:09

Keryanie

7257 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Keryanie Over a year ago

You have to DI your service in your component constructor: constructor(private _myService: ClassToggleService) {}

Roboneter Over a year ago

Thanks this works, was thinking about a solution like this, just wasn't sure how to implement it. One problem though. The value always stays false and doesn't toggle. Any idea on how to fix that part ?

Roboneter Over a year ago

Thanks thats better, I stored the variable in my service instead of my component so my subscribtion now toggles true/false, I put that in localBool and use that for class.active. But somehow my view doesn't update.. that quite weird cuz when i console log in my subscribe it sends the right values... Any idea?

Roboneter Over a year ago

Even if I just use an public variable in my component, and toggle it in the same component the view doesn't update. The bool gets updated, if I debug or console the value toggles betweet true and false so that alright. But the class does not get added.

Roboneter Over a year ago

Alright thanks it works now, apparantly i had to run ng serve again... idk why. But it works. Thanks for your effort, marked your comment as answer.

|

Suresh Kumar Ariya · Accepted Answer · 2018-11-22 07:49:22Z

1

Why we need service, this should be integrated with component class. As a general rule, you are not supposed to call service method in template file.

export class TestComponent implements OnInit{
   public menuActive = false;

    toggleMenu() {
      this.menuActive = !this.menuActive;
    }
}

Template:

<div id="mainContainerRightTop" [class.active]="menuActive">

edited Nov 22, 2018 at 7:49

answered Nov 22, 2018 at 7:46

Suresh Kumar Ariya

9,8041 gold badge22 silver badges28 bronze badges

9 Comments

Pardeep Jain Over a year ago

So where It is stated in your answer that why it is not working with service?

Suresh Kumar Ariya Over a year ago

Using Service is not a prefered appraoch. You are not allowed to bind service class in template

Pardeep Jain Over a year ago

Can you redirect me using link where it is written that Using Service is not a prefered appraoch? and why I am not allowed to bind service class in template?

Suresh Kumar Ariya Over a year ago

It's quite simple. Any component can inject the service and modify public variables. If it is inside component. only that component and child components can update it.

Roboneter Over a year ago

I can't do it in the same component because the toggle part is in another component then the menu itself. I am aware that getting the menuActive directly from the service in the view is not best practice, but I don't see a problem in using an service in general and not calling it directly from the view.

|

Collectives™ on Stack Overflow

Angular View binding not updating with simple boolean

2 Answers 2

6 Comments

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related