Triggering change detection manually in Angular

Question

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

User · Answer

I was able to update it with markForCheck()

Import ChangeDetectorRef

import { ChangeDetectorRef } from '@angular/core';

Inject and instantiate it

constructor(private ref: ChangeDetectorRef) { 
}

Finally mark change detection to take place

this.ref.markForCheck();

Here's an example where markForCheck() works and detectChanges() don't.

https://plnkr.co/edit/RfJwHqEVJcMU9ku9XNE7?p=preview

EDIT: This example doesn't portray the problem anymore :( I believe it might be running a newer Angular version where it's fixed.

(Press STOP/RUN to run it again)

User · Answer

In Angular 2   try the  Input decorator  It allows for some nice property binding between parent and child components   First create a global variable in the parent to hold the object property that will be passed to the child    Next create a global variable in the child to hold the object property passed from the parent   Then in the parent html  where the child template is used  add square brackets notation with the name of the child variable  then set it equal to the name of the parent variable  Example    lt child-component-template  childVariable    parentVariable gt   lt  child-component-template gt    Finally  where the child property is defined in the child component  add the  Input decorator    Input   public childVariable  any   When your parent variable is updated  it should pass the updates to the child component  which will update its html   Also  to trigger a function in the child component  take a look at ngOnChanges

User · Answer

ChangeDetectorRef detectChanges   - similar to  scope  digest   -- i e   check only this component and its children

User · Answer

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

User · Answer

I used accepted answer reference and would like to put an example  since Angular 2 documentation is very very hard to read  I hope this is easier    Import NgZone   import   Component  NgZone   from   angular core    Add it to your class constructor  constructor public zone  NgZone     args     Run code with zone run   this zone run      gt  this donations   donations

[angular] Triggering change detection manually in Angular

Examples related to angular

Examples related to angular2-changedetection