How this piece of code running change detection angular?

Question

ngAfterViewinit(){ 
var f=function(){
      this.a="changing val"
    }
    document.getElementById('d').addEventListener('click',f.bind(this));
}

How is angular running change detection and updating view on this click event? As much as I know, change detection works in angular context, zone encapsulate events and run change.

In this I am using native dom event; if we were using angularjs, we had to run digest cycle manually, but here how does angular know even if click event is outside context?

Pleas don’t use this code in production, angular have better way of doing the same — Akxe

Wolfgang Stengel Wolfgang Stengel · Accepted Answer · 2019-10-08T10:00:45

Every callback you register inside Angular code is caught by the Zone and Angular gets notifed afterwards to trigger change detection. Zones work by monkey patching native DOM methods, in this case addEventListener. This method is at this point not the native browser method anymore but a replacement from zone.js, which let's you do what you wanted to do, but informs Angular afterwards.

How this piece of code running change detection angular?

1 Answers