When using native mobile apps, we can observe a common behavior that, when within the app if we open a dialog, open a menu, open select list; then pressing back button on mobile it closes the dialog, opened menu or opened select list.
I am trying to achieve the same behavior for my Angular app that uses Angular Material components.
What I would like to do is whenever the user presses back button it check, if there an opened dialog, opened menu, or opened select list, it closes it and cancel navigation so that user stays on the same page. Similarly there could be a custom inline component (for example inline form) that I would like to close when user press back button while staying the same page.
I have seen different questions related to this on stack overflow for angular and non angular apps, most of them with some hacks.
I wanted to know what would be the best approach. One way I think this could be accomplished is through the router guard, but I wonder how to make this work across the application. I mean observe the opened dialogs/menu/select list etc which belongs to a specific component in guard.
