0

Before IVY, we could trigger change detection like this, based on this awesome SO answer:

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

The question now is, how do we achieve this in Ivy?

When running in dev mode, and typing ng in the console reveals this:

enter image description here

But I am unsure how to use this to detect changes in the root element?

workaround

By injecting the ChangeDetectorRef in a given component, i can do the following (where $0 is the previously selected element in the dev tools):

ng.getComponent($0).changeDetectorRef.detectChanges()

But this is not for the root component?

Jeff Mercado
  • 129,526
  • 32
  • 251
  • 272
DauleDK
  • 3,313
  • 11
  • 55
  • 98

1 Answers1

1

You can call 

ng.markDirty($0)

Where $0 is the selected element in the devtools panel.

In v9 it's the applyChanges method.

undefined
  • 6,366
  • 12
  • 46
  • 90
  • ok, so when doing this programmatically you would then have to query for the root element first, and then `markDirty`? Does markDirty trigger changeDetection, or does it only mark the component for change detection next time it runs? – DauleDK Dec 05 '19 at 09:09
  • It takes a component and triggers change detection. – undefined Dec 05 '19 at 09:14
  • I just upgraded to Angular v9 now, and I can't find the method markDirty? – DauleDK Feb 07 '20 at 21:16
  • ng.applyChanges() – undefined Feb 08 '20 at 18:09
  • 2
    Currently this stackoverflow answer is ranking high for `ng.applyChanges` and it isn't explained well *at all* in the Angular docs. So for people like me that just found `ng.applyChanges()` by itself throws an assertion error - you must provide a component. `ng.applyChanges(ng.getComponent(temp1))` where `temp1` is a DOM element. You can right click on the `app-mycomponent` node in Chrome and select `Store as global variable` to get `temp1` assigned to a component already on the page. – Simon_Weaver Feb 19 '20 at 18:51