CODEWITHSUNDEEP
angular
Ryan
Ryan

Reputation: 5973

Trigger Angular change detection from console

In AngularJS we were able to trigger a digest cycle by getting the ng-app element with something like 

var scope = angular.element(element).scope(); 
scope.$apply(...);

I have looked all over for a solution to do this in Angular(4+) but have only found solutions that work in the app like(Triggering Angular2 change detection manually). I need something that works from the console.

I'm sure I'm doing it wrong but trying to apply the answer on the above question didn't work. I tried many variations of this:

ng.probe($0).injector.view.root.ngModule.injector.get('ApplicationRef')

Upvotes: 17

Views: 9301

Answers (3)

yurzui
yurzui

Reputation: 214007

I usually do it as follows in dev mode

ng.probe(getAllAngularRootElements()[0]).injector.get(ng.coreTokens.ApplicationRef).tick()

enter image description here

Starting with Angular 9 with Ivy you can call:

ng.applyChanges(ng.getComponent($0))

Where $0 points to component's element

enter image description here

Upvotes: 25

Rizwan Liaqat
Rizwan Liaqat

Reputation: 85

@guati I was getting some "Failed to Load Module" error (angular 7), the error was triggered due to some changes in the routing but even when I reverted the changes, the error persisted (may be changes were not being detected) so I just restarted the development server (served the application again) and it went away.

Upvotes: 0

Ilker Cat
Ilker Cat

Reputation: 1942

Solution 1:
1. Click on the element (on which you want to trigger change detection) in the dev-tools Elements-Tab
2. ng.probe($0).injector.get(ng.coreTokens.ApplicationRef).tick()

Solution 2: Trigger a specific components change detector
1. Click on the element (on which you want to trigger change detection) in the dev-tools Elements-Tab
2. ng.probe($0).componentInstance.cdRef.detectChanges()

Upvotes: 8

Related Questions