How to handle being outside Angular Zone when navigating back?

[alucardu]

I'm having some difficulties regarding my Angular application. I'm also using Angular Material. My issue is that when I navigate back from page b to page a and want to open a material select element nothing happens, aka no options are shown. If I open a Material dialog then also the select options will show.

I found out it has to do with change detection and NgZone, so what I've done now is add a ngIf="true" to my select, now when I switch between the pages the select shows the options correctly when clicked. But ... there must be a better way to achieve this right?

In that same component I have a button that opens a Material dialog:

public createReviewDialog(): void {
  this.ngZone.run(() => {
    this.dialog.open(CreateReviewDialogComponent, {
      data: {
        reviewInput: this.reviewInput,
      },
      height: '98vh',
      minWidth: '95vw',
    })
  })
}

I have to add the this.ngZone.run() functionality only for the situation when someone navigates back to this page and then tries to open the dialog. The dialog will open but it will have no styling etc, until I type in it, triggering change detection.

I do have this eventListner in the root of my app:

public ngOnInit(): void {
  CapacitorApp.addListener('backButton', ({ canGoBack }) => {
    if (window.screen.orientation.type === 'landscape-primary') return;

    if (canGoBack) {
      window.history.back();
    } else {
      this.exitConfirmation = true;
    };
  });
}

Is there something I can do at this level to do change detection on all components rendered in the page? That way I don't have to manually add a change detection thing for each individual element.