Angular detect if a popup window is opened

Question

In my board (written in Angular 4), the dialogues are opened like below:

Importing ActivatedRoute, Router

import { ActivatedRoute, Router } from '@angular/router';

Adding Router and ActivatedRoute references in constructor

constructor ( ... private _router: Router, private _activatedRoute: ActivatedRoute, ...)

And Using it in below way

this._router.navigate(['./', { outlets: { somemodal: 'somemodal', dialogs: null }, relativeTo: this._activatedRoute }]);

Requirement is when you hit escape Esc it should show the removal modal (an other modal already implemented and working).

But QA has raised an issue like when other popups (like scanned check image/ rescan popup / customer id popup / error message popups) are present then on hit Esc those popups should close first.

If no other popup are present, then only Removal modal will open, which is not happening at present. On hit Esc it is still opening the removal popup.

Question: How can I detect if other popups are present.

Note : At the very beginning of development, in some shared service, we could have created flag like isPopupOpened: boolean = true and on closing the same popup it should be turned to isPopupOpened = false. But this is not implemented and several modals are implemented, which all are opened in different stages in my board. An user may hit Esc at nay point of time. So I want to what is the solution of the same.

Answer 1

I got the solution.

keyCommandHandler(command: Command): void {
        switch (command.name) {
          case 'App.Escape':
          if (this._router.url.indexOf('dialogs') === -1  && this._router.url.indexOf('subdialogs') === -1) {
            this.cancelHelper();
          }else {
            this._router.navigate(['./', { outlets: { dialogs: null }, relativeTo: this._activatedRoute }]);
          }
            break;
        }
      }

Just check if any dialogs or subdialogs is present in your URL. It works for me.

Answer 2

You might need to maintain a state for each popup in shared service. Based on the state value you need to handle the popup display/close and user press ESC button. To handle keyboard events, you can use directive and shared service can be injected in Constructor to update the state.