Angular 2+ sliding sidebar outside router outlet

Question

I am trying to implement a sidebar that opens up on various button clicks throughout the application ("more info" type of functionality). For that reason I am looking to place the sidebar component outside the router outlet.

app-component:

<nav>
<router-outlet>
<sidebar>

When the sidebar is open, I would like to grey out the rest of the screen and have a click anywhere (besides the sidebar close the sidebar). The way I thought to do it is wrap the nav and router-outlet in a div with a click event to close the sidebar. Sidebar open/close/toggle is managed with a service. The issue I'm having is wrapping the router-outlet (and nav) like that overrides the actual button clicks inside the routes meant to open the sidebar. Any advice? Many thanks

Answer 1

You may just need to have the sidebar react based upon subscribing to an observable, or behaviorsubject. I used a BehaviorSubject to receive commands, and subscribed to it in another part of the program, and having it react accordingly. Kinda like a messaging system for your app. It worked really well for me! You w oi uld drive it based on onclicks and forget routing altogether for that part of it.

I dont think you would do this within the sidebar, but rather the controller that hosts the sidebar e.g. the parent. If you need code let me know, but I thought this answer would send you down the right path.

The other thing you can do is once you have control of the slider, you could have it pop a modal div. I dont have any code for that though.