Why run outside angular is implicitly called?

Question

I had a similar issue with mat-dialog, I was not able to open/close it. What is interesting is that it works for about 20 minutes after I refresh the component. But after that, it stops working.

I read this issue https://github.com/angular/components/issues/9875 and this https://github.com/angular/components/issues/9676 and this https://github.com/angular/components/issues/7550#issuecomment-345250406 and this StackOverflow answer: Angular Material Dialog not closing after navigation

All suggested that "Somehow, my code run outside angular zone, so I need to reenter the zone"

Hence changing:

onButtonClick(){
   this.stopRecordingDialog.openDialog();
}

Somehow, wrapping the openDialog with ngZone.run() solve the issue.

onButtonClick(){
   this.ngZone.run(() => {
        this.stopRecordingDialog.openDialog();
      });
}

But that's the part I don't understand. Why my code runs outside angular? I never explicitly call runOutsideAngular and the onButtonClick is neither inside an async callback.

In fact, onButtonClick is directly tied with a button element like this:

  <button mat-stroked-button (click)="onButtonClick()">
            <mat-icon>save_alt</mat-icon>
            Export
        </button>

So why my code runs outsideAngular ?

the ngZone is used when an event happens outside Angular, e.g. you has a function in javaScript that change a variable in angular. So, I think that you has anything wrong in your code to not work (other use of ngZone is when we want not inmediatly response -e.g. when we are using a listener of window scroll-) — Eliseo, Jul 25 '19 at 06:13
@TSR how are you sure that your code is run outside zone? Have you checked it with `NgZone.isInAngularZone()`? — overthesanity, Jul 26 '19 at 09:38

Why run outside angular is implicitly called?

0 Answers0