Updating Angular component from a service using BehaviorSubject

Question

I am trying to show/hide an ng-container based on a variable on a service. The value should be changed in a Global Error Handler that should catch all the exceptions on my application.

In my service, I have created a variable that exposes my BehaviorSubject as observable.

export class ErrorsService {

  private notify = new BehaviorSubject(false);

  // Subscribe to cast in the component
  cast = this.notify.asObservable();

  // Change notify value
  notifyError(){
    this.notify.next(true);
  }

  constructor() { }

}

I injected this service in my global error handler in order to call notifyError() as followed:

export class GlobalErrorHandler implements ErrorHandler {

  constructor(private errorService: ErrorsService) { }
  handleError(error: any) {

    // Notify subscribers
    this.errorService.notifyError();
     
    //continue handling the error

    }
  }

In my component, I am using the same service to subscribe to the variable "cast" and change the local variable show.

export class ErrorsBlockComponent implements OnInit {

  show = false;
  constructor(private errorsService:ErrorsService) {}

  ngOnInit(): void {
    this.errorsService.cast.subscribe(value=>{
      this.show = value;
    });
  }
  
}

Finally, my component's html looks like

 <ng-container *ngIf="show">There is an Error!</ng-container>

The view wont update until for instance I click on a button! (any button in the app). The show value is changed to true, but the view seems to not update.

My question is why the view doesn't update when the service value is updated as expected? When I use console.log(value) I can see the value becoming true, but nothing happens on the UI until I press a button.

Update:

I replicated the issue on StackBlitz

https://stackblitz.com/edit/angular-ivy-j7thwx?file=src/app/app.component.ts

I also used ChangeDetectorRef.detectChanges() which seemed to fix the problem. However, I would like to know why it didn't work without it since this project is for learning purposes.

What is triggering the handleError call? Could be a timing issue based on what you are saying — ukn, Sep 19 '22 at 17:31
@MatthieuRiegler I don't believe so. I an fairly new to angular and I am not familiar with this. — Muhannad, Sep 19 '22 at 17:38
@ukn I purposely throw status of 404 (Not Found) error. The error handler should be able to catch all the exceptions on my application and it works I tested it. — Muhannad, Sep 19 '22 at 17:39
ChangeDetection is not firing there should be a clear cause. Can you share more code ? (there are no decorators in your code for example). Maybe you can share an example on StackBlitz — Matthieu Riegler, Sep 19 '22 at 17:54
Does the same happen with `*ngIf="errorsService.show | async"`? — Pieterjan, Sep 19 '22 at 20:01
@MatthieuRiegler please check the update with stackblitz url — Muhannad, Sep 20 '22 at 01:51
Can you check this out https://stackoverflow.com/questions/50519200/angular-6-view-is-not-updated-after-changing-a-variable-within-subscribe — Kelum Bandara, Sep 20 '22 at 02:32
@KelumBandara Are you suggesting that my code is outside of the ngzone? If yes, what is the reason for it to be? — Muhannad, Sep 20 '22 at 14:49

Kelum Bandara · Accepted Answer · 2022-09-20T16:09:24.000

2

This is because your code runs outside the angular Zone. If anything happens outside angular zone you need to run NgZone to push your change.

Here is how you can check whether your code line is within NgZone.

NgZone.isInAngularZone()

In your case you can do

  ngOnInit() {
    console.log('Outside subscription Is in angular zone: ' + NgZone.isInAngularZone());
    // Subscribe to error service
    this.errorsService.cast.subscribe((value) => {
      this.show = value;
      console.log('Within subscription Is in angular zone: ' + NgZone.isInAngularZone());

    });

    // The getSomething call is going to throw an error
    this.anotherService
      .getSomthing()
      .subscribe((result) => (this.result = result));
  }

Checkout the updated stackblitz

To trigger the change you can to

this.ngZone.run( () => {
     this.show = value;
  });

As stated in here

edited Sep 20 '22 at 16:09

answered Sep 20 '22 at 16:02

Kelum Bandara

443
4
9

Thanks for the answer. Since both this solution and using ChangeDetectorRef.detectChanges() seem to fix the issue. Do you have any idea which one I should be using in my case? For example performance wise? – Muhannad Sep 20 '22 at 16:23
1

There seems to be no clear evidence of how NgZone would effect performance. My guess is that it just runs the provided code within angular zone as normal code. So I would still use Zone.run() . ChangeDetectorRef.detectChanges() on the other hand only effects the used component tree. https://angular.io/guide/zone#ngzone-run-and-runoutsideofangular – Kelum Bandara Sep 20 '22 at 16:53

score -1 · Answer 2 · answered Sep 19 '22 at 18:05

public notify = new BehaviorSubject<boolean>(false);
notifyError(val){
    this.notify.next(val)
}

And you can subscribe

this.errorsService.notify.subscribe(res=>{
    this.error=res
}

you can try this once , You haven't done wrong , didn't see much why it didn't work

Updating Angular component from a service using BehaviorSubject

2 Answers2