Search code examples
angularangular2-changedetection

Triggering change detection manually in Angular

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?

Solution

  • 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.