Triggering change detection manually in Angular
Try one of these:
ApplicationRef.tick()
- similar to AngularJS's$rootScope.$digest()
-- i.e., check the full component treeNgZone.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.
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)
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(() => this.donations = donations)
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:
<child-component-template [childVariable] = parentVariable>
</child-component-template>
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.