Depending on how that boolean changes you could expose it as an Observable<boolean> on your service, and then subscribe to that stream in your component. Your service would look something like: @Injectable() export class MyBooleanService { myBool$: Observable<boolean>; private boolSubject: Subject<boolean>; constructor() { this.boolSubject = new Subject<boolean>(); this.myBool$ = this.boolSubject.asObservable(); } …some code that emits … Read more
I have solved the problem. Another component sending notifications to this component was running Observable.fromEvent() outside the Angular zone, so change detection was not happening automatically in response to these events. This post on zones and this StackOverflow post on the issue held the solution!
ApplicationRef.tick (same as setTimeout()), and zone.run() cause change detection on the whole application. Also event listeners added within Angular or by Angular (using view bindings or @HostBinding() cause change detection for the whole application. ChangeDetectorRef.detectChanges runs change detection for a specific component (and its descendants if applicable, for example because of input bindings) If some … Read more
To solve your issue, you simply need to get and store the size of the div in a component property after each resize event, and use that property in the template. This way, the value will stay constant when the 2nd round of change detection runs in dev mode. I also recommend using @HostListener rather … Read more
You could also use the trackBy option in your *ngFor expression, providing a unique ID for every item inside the array. This does make you 100% responsible for change detection, so update this (unique) property every time the item in the array changes. Angular will then only re-render the list if any item inside your … Read more
ChangeDetectorRef is not option to use here. It is looking for changes in a given component and its children. In your case It would be better to use ApplicationRef: import {Injectable, ApplicationRef } from ‘@angular/core’; @Injectable() export class MyService { private count: number = 0; constructor(private ref: ApplicationRef) {} increment() { this.count++; this.ref.tick(); } } … Read more
this error occur because you in dev mode: In dev mode change detection adds an additional turn after every regular change detection run to check if the model has changed. so, to force change detection run the next tick, we could do something like this: export class App implements AfterViewChecked { show = false; // … Read more
Rendering happens after change detection. To force change detection, so that component property values that have changed get propagated to the DOM (and then the browser will render those changes in the view), here are some options: ApplicationRef.tick() – similar to Angular 1’s $rootScope.$digest() — i.e., check the full component tree NgZone.run(callback) – similar to … Read more
In Angular 2, change detection is automatic… $scope.$watch() and $scope.$digest() R.I.P. Unfortunately, the Change Detection section of the dev guide is not written yet (there is a placeholder near the bottom of the Architecture Overview page, in section “The Other Stuff”). Here’s my understanding of how change detection works: Zone.js “monkey patches the world” — … Read more
detectChanges() : void Checks the change detector and its children. It means, if there is a case where any thing inside your model (your class) has changed but it hasn’t reflected the view, you might need to notify Angular to detect those changes (detect local changes) and update the view. Possible scenarios might be : … Read more