In angular app I had to modify history stack to close active ngbModal on browser's back button.

In app.component.ts I injected modalService like private readonly modalService: NgbModal to make this component aware of activeModals.App component must be the place where I should apply changes because I have lots of modal around 100 in the app so I can't write code in all these components where modals used.

modalService.activeInstances.subscribe((activeModals: NgbActiveModal[]) => {
  if (activeModals.length > 0) {
    if (activeModals.length === 1) {
      history.pushState(history.state, null);
    }
    this.lastModalInstance = activeModals[activeModals.length - 1];
  }
  else {
    this.lastModalInstance = null;
  }
})

In this implementation I'm listening activeModals array and I want to close modals one by one on each browser's back button click.Once a modal is active I'd like to modify state not to goBack once its clicked.Whenever this observable recieves new activeModals array last one should be picked and assigned to lastModalInstance variable.When all modals are closed empty array is emitted so variable lastModalInstance should be null.

  @HostListener('window:popstate', ['$event'])
  onBrowserBtnClicked(event: Event) {
    event.preventDefault();
    if (this.lastModalInstance) {
      this.lastModalInstance.close();
    }
  }

In the end event popstate is being triggered on each forward-back button clicked in browser.When back button clicked,if active modal exists it should be closed otherwise app should be navigated back.

This implementation working quite good for clicking back.But clicking forward breaks my logic.I couldn't figure out what to do also to handle forward button.Is there anyone who can help me with this? I'm also open for other solutions. (Angular 11 is used for this)