mat-dialog not opening on page load properly

Question

I'm trying to get mat-dialog to open whenever a specific url is loaded. Currently it only works if you do a full page reload. I want it to launch the mat-dialog whenever this specific angular route is loaded no matter if it's a full page load or already loaded angular app that is using the angular router. I've tried putting the following code inside ngOnInit() and also tried inside ngAfterViewInit() but same issue. Another thing I tried was putting it in the constructor right after getting userIsAuthenticated value, but same problem. I appreciate any help!

 ngAfterViewInit() {
    if (!this.userIsAuthenticated) {
      const dialogRef = this.dialog.open(ConfirmationAgeComponent, {
        panelClass: "dialogBoxStyler"
      });

      dialogRef
        .afterClosed()
        .pipe(takeUntil(this.destroy))
        .subscribe(result => {
          if (result) {
            this.over21Agreed = true;
          }
        });
    }
  }

I also tried adding the following to the constructor:

 constructor(private router: Router){
    this.url = this.router.url;
    if (this.url === '/' || this.url.includes('search-results')) {
      alert("HERE")
    }
}

but the alert only pops up the first time. If I click the url in the address bar to highlight the url and hit enter, the alert doesn't come up.

Answer 1

We are using angular lifecycle in the wrong manner.

Define Dialog :-

 openAgeConfirmationDialog() {

    const dialogRef = this.dialog.open(ConfirmationAgeComponent, {
      panelClass: 'dialogBoxStyler'
    });

    dialogRef
      .afterClosed()
      .pipe(takeUntil(this.destroy))
      .subscribe(result => {
        if (result) {
          // I defined over21Agreed to true so that component appears on screen fyi
          this.over21Agreed = true;
        }
      });

  }

Then, call openAgeConfirmationDialog() once in ngOnInit() and once in router.events within ngOninit().

ngOnInit() {

    this.openAgeConfirmationDialog();

    this.router.events.pipe(
      filter((event: RouterEvent) => event instanceof NavigationEnd),
      takeUntil(this.destroy),
      debounceTime(1000)
    ).subscribe(() => {
      this.openAgeConfirmationDialog();
    });

We are using debounceTime because it is bypassing issue caused by the route change.