How to close dialog on browser back navigation

[snowfrogdev]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[x] Support request
[ ] Other... Please describe:

Current behavior

When a dialog is opened and the user clicks the browser back button, the dialog doesn't close.

Expected behavior

For the dialog to close when the browser back button is clicked.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Just doesn't feel right to have navigation happen behind the dialog.

Environment

Angular version: 13


Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

[NetanelBasal]

Close it on component destroy

[snowfrogdev]

Right. That will indeed close the dialog. But it doesn't stop navigation. What I would like is for hitting the back button in the browser to correspond to closing the dialog and nothing else. This is especially important for dialog that are very big and basically act like a page in front of another page. The user's expectation with those is to find themselves back where they opened the dialog if they hit the back button.

I have found a way to do it, but I think it would be great if this was built-in to your library as a dialog instance option. Here is my solution:

const closedModalRefs = new Set<string>();

@Component({
  selector: 'in-listing-preview',
  templateUrl: './listing-preview.component.html',
})
export class ListingPreviewComponent implements OnInit {
  listingDetails?: ListingDetails;

  constructor(public ref: DialogRef<ListingDetails>, private location: LocationStrategy, private router: Router) {}

  ngOnInit(): void {
    this.listingDetails = this.ref.data;

    this.location.pushState('ListingPreviewModal', 'ListingPreviewModal', this.router.url, '');
    this.location.onPopState(() => {
      if (closedModalRefs.has(this.ref.id)) return;
      closedModalRefs.add(this.ref.id);
      this.ref.close();
    });
  }
}

As you can see, if forces my Dialog Component to depend on LocationStrategy and Router, which is kind of weird and a concern that you wouldn't normally want to deal with at this level of abstraction. Having that mechanism built-in to your lib and exposed through instance config would be nice.

If you think it would be a good idea and you accept PRs, I'm willing to take a crack at it.

[NetanelBasal]

You are welcome to submit a PR

[thewebchameleon]

My workaround:

export class AppComponent {

  constructor(
    private router: Router,
    private readonly dialogService: DialogService,
  ) { }

  ngOnInit(): void {
    this.router.events.subscribe((event: any) => {
      if (event instanceof NavigationEnd) {
        this.dialogService.closeAll();
      }
    });
  }

}