Trigger Angular change detection from console

Question

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')

it doesn't work because you pass a string `'ApplicationRef'` instead of a reference to an `ApplicationRef` class. You need to get reference to the application class like @yurzui showed - `ng.coreTokens.ApplicationRef`. For more information on debugging, see [Everything you need to know about debugging Angular applications](https://hackernoon.com/everything-you-need-to-know-about-debugging-angular-applications-d308ed8a51b4) — Max Koretskyi, Jun 30 '17 at 04:44
I asked the same question, regarding Ivy here: https://stackoverflow.com/q/59191406/3694288 — DauleDK, Dec 05 '19 at 09:53

yurzui · Accepted Answer · 2020-10-13T13:37:59.977

25

I usually do it as follows in dev mode

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

Starting with Angular 9 with Ivy you can call:

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

Where $0 points to component's element

edited Oct 13 '20 at 13:37

answered Jun 30 '17 at 04:35

yurzui

205,937
32
433
399

I keep getting back to this page so often :D thanks for response. Plus is there any shortcut ? – katmanco Aug 01 '22 at 10:34

Ilker Cat · Answer 2 · 2017-11-10T10:34:21.020

8

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()

edited Nov 10 '17 at 10:34

answered Nov 04 '17 at 21:04

Ilker Cat

1,862
23
17

ng.probe($0).componentInstance.cdRef === undefined – makeitmorehuman Nov 30 '17 at 13:04
2

For solution 2: Apparently, to use this*, you must inject the changeDetectorRef into your component, from @angular/core... ( * cdRef being the locally-declared instance of changeDetectorRef ) – Dan Overlander Jan 25 '18 at 14:23
Greate explanation dude :) – katmanco Oct 26 '21 at 07:44

score 0 · Answer 3 · answered May 20 '19 at 06:48

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

Trigger Angular change detection from console

3 Answers3

Linked