Triggering change detection manually in Angular

angular angular2-changedetection
jz87 picture jz87 · Jan 16, 2016 · Viewed 266.8k times · Source

I'm writing an Angular component that has a property Mode(): string.

I would like to be able to set this property programmatically not in response to any event.

The problem is that in the absence of a browser event, a template binding {{Mode}} doesn't update.

Is there a way to trigger this change detection manually?

Answer

Mark Rajcok picture Mark Rajcok · Jan 16, 2016

Try one of these:

  • ApplicationRef.tick() - similar to AngularJS's $rootScope.$digest() -- i.e., check the full component tree
  • NgZone.run(callback) - similar to $rootScope.$apply(callback) -- i.e., evaluate the callback function inside the Angular zone. I think, but I'm not sure, that this ends up checking the full component tree after executing the callback function.
  • ChangeDetectorRef.detectChanges() - similar to $scope.$digest() -- i.e., check only this component and its children

You can inject ApplicationRef, NgZone, or ChangeDetectorRef into your component.

Related questions

How to detect when an @Input() value changes in Angular?

I have a parent component (CategoryComponent), a child component (videoListComponent) and an ApiService. I have most of this working fine i.e. each component can access the json api and get its relevant data via observables. Currently video list component …

Read More
ExpressionChangedAfterItHasBeenCheckedError Explained

Please explain to me why I keep getting this error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Obviously, I only get it in dev mode, it doesn't happen on my production build, but it's very annoying and I simply …

Read More
How to force a component's re-rendering in Angular 2?

How to force a component's re-rendering in Angular 2? For debug purposes working with Redux i'd like to force a component to re-render it's view, is that possible?

Read More