search

arkon / ng-sidebar

[Inactive] Angular sidebar component.
https://echeung.me/ng-sidebar
MIT License
388 stars 136 forks source link

Create component with sidebar and use <router-outlet> as <sidebar-content> #176

Closed Oscarsgc closed 5 years ago

Oscarsgc commented 5 years ago

The question explains a lot. I'm trying to create a component (left-side-bar) that contains all the logic for the sidebar functionality. It has the following structure: <button (click)="toggleOpened()" class="header-toggle">X</button> <ng-sidebar-container (onBackdropClicked)="onBackdropClicked()" style="height: 100vh;"> <ng-sidebar [(opened)]="opened" ....> <a closeSidebar> &lt; This will close the sidebar</a> <hr> <p>Option A</p> ... </ng-sidebar> </ng-sidebar-container>

And use it in my app main component like this: <div class="content"> <left-side-bar></left-side-bar> <div ng-sidebar-content> <section> <router-outlet></router-outlet> </section> </div> </div>

Unfortunately it doesn't works... Any idea on how could I make this work?

arkon commented 5 years ago

The container needs to encapsulate both the sidebar itself and the content, which is probably why it isn't working.

Oscarsgc commented 5 years ago

So I guess that there's no way to separate and make what I'm trying to achieve right? I guess that the best implementation will be use the sidebar straight in the app component, isn't it?

arkon commented 5 years ago

Not really, no. The 3 different parts are pretty strongly tied together to handle certain functionality like the backdrop.

You could in theory make the left-side-bar component wrap the content (i.e. the router-outlet).