Angular - Add a sidebar to a dashboard parent module

I built a dashboard parent module which contains 2 submodules : usersModule and statsModule

I would like to display a sidebar inside the parent module to navigate accross submodules but I want to avoid calling the sidebar in every module. What is the best way to do that ?

structure

here is what i got so far

# dashboardModule statsModule containers components usersModule containers components sharedModule services guards pipes // other stuff # homeModule # eventsModule

thanks

1 Answer
1

I personally used the Material2 sidenav in my Angular2 project for this purpose, worked great.

https://material.angular.io/components/sidenav/overview

** guess I should expand**
I used it as a "wrapper" div in my parent component that called all my child components from within that wrapper.

so in my case I had a "sidenav" component that was my parent and all other child components were called/rendered within that view.

code example

<mat-sidenav-container> <mat-sidenav> </mat-sidenav> <Component-selector></Component-selector> //or you can place your router outlet here if your using a router <router-outlet></router-outlet> </mat-sidenav-container>

here is image of how I structure my project.
enter image description here

hum thanks but its all about architecture, i would like to know how to structure my module to show this navbar across all submodules
– angularWannabe
Aug 31 at 13:12

do you have a github link or? because i don't understand how you could put a module inside a component
– angularWannabe
Aug 31 at 13:26

see revised code example. Well i refer to all of my Angular 2 items as a component... this may be a miscommunication on my part of using the wrong terms. see code example above, hoping that illustrates further how I did this.
– Marshal
Aug 31 at 13:30

Here is a link with more information on modules and using the router with them that may help as well. malcoded.com/posts/angular-fundamentals-modules
– Marshal
Aug 31 at 13:41

my structure looks like this github.com/UltimateAngular/angular-pro-app-seed/tree/… so i could not add a shared navbar here ?
– angularWannabe
Aug 31 at 13:46

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

搜尋此網誌

Dfyjkt