Angular2 zone.run() vs ChangeDetectorRef.detectChanges()

Question

Say I have a function noificationHandler() in my service.ts that is outside of angular's context. noificationHandler() is invoked by a third party and noificationHandler() basically consumes an array and emits the array to components which have subscribed to his service.

service.ts

    public mySubject: Subject<any> = new Subject();
    public myObservable = this.mySubject.asObservable();

    constructor() {
       this.registry.subscribe("notification.msg",this.noificationHandler.bind(this));
    }

    noificationHandler(data) {
       this.publishUpdate(data)
    }

    publishUpdate(data) {
       this.mySubject.next(data);
    }

component.ts

constructor(private service: myService) {
    this.service.myObservable.subscribe(list => {
        this.list = list;
    });
}

^^^ at this point the template is not updated with the new data

Since the "notification.msg" is outside of angular's zone, angular s change detection is not run when this event("notification.msg") is invoked.

Now there are 2 ways to invoke change detection.

1) By wrapping the noificationHandler() inside of angular's zone.run()

 this.registry.subscribe("a2mevent.notification.msg", this.ngZone.run(() => this.noificationHandler.bind(this)));

2) By individually asking the component to detect changes

constructor(private service: myService, private ref: ChangeDetectorRef) {
    this.service.myObservable.subscribe(list => {
        this.list = list;
        this.ref.detectChanges(); // <==== manually invoking change detection
    });
}

Both the options work! And my component structure is as follows

A --> root component
B
C
D // my component is here (4 levels of nesting)

Questions -

1) Will detectChanges() detect changes only for its own components or will it also run change detection on child components?

2) will zone.run() trigger the change detection of all the components from the root till the leaf?

Among the zone.run() and detectChanges() I am curious as to which is better in performance?

Answer 1

ApplicationRef.tick (same as setTimeout()), and zone.run() cause change detection on the whole application. Also event listeners added within Angular or by Angular (using view bindings or @HostBinding() cause change detection for the whole application.

ChangeDetectorRef.detectChanges runs change detection for a specific component (and its descendants if applicable, for example because of input bindings)

If some code running outside Angular's zone calls into Angular's code and changes the state, then change detection needs to be invoked explicitly because Angular has no way of knowing that the state changed.

If the change to the state is local to a component (for example a components field), ChangeDetectorRef.detectChanges or ChangeDetectorRef.markforCheck are more efficient.

If the call from outside for example navigates to a different route, this can have consequences to a number of components, and it's also not clear when the whole route change is completed because it might cause async calls (and callbacks being called). In this case zone.run() is the better option, because the code directly and indirectly invoked (like callbacks of observables and promises) invoked will run inside Angular's zone and Angular will recognize them and invoke change detection automatically.

Answer 2

Both are totally different things.

NgZone is a lib that provide zones for your app so you can run the instances into multiple scopes.

ChangeDetection is always from parent to leaf like A > B > C When you call detectChanges() it will invoke the current component and its child components too. So this is the best approach to use OnPush changesdetectionStrategy for leaf components, so they will only detectChanges when inputs are updated.

Also, ApplicationRef is similar to ChangeDetector; the difference is it will detect changes from root component to last child component.

ChaneDetection and NgZone is best combination always to avoid the unnecessary ChangeDetection