0

I'm thinking of implementing a "contextual" navbar, which displays elements (input, buttons, links...) according to the current routed pages need (so basically what macOS or the mac touchbar does)

My approach is to have a separate navbar and page view outlet

Here I'd need to use services or observables to hook up the navbar and pages modules so that they are aware of each other. I'm just not sure if this in long run will cause problems.

Below is the example folder structure with a calendar app and a landing page

app
  |--navbar
    |--calendar-navbar
      |--calendar-navbar.component.ts
    |--landing-page-navbar
      |--landing-page-navbar.component.ts
    |--navbar.module.ts
  |--pages
    |--calendar
       |--calendar.compontent.ts
    |--landing-page
       |--calendar.compontent.ts  
    |--pages.module.ts
    |--pages.compontent.ts
  |--app.component.ts
  |--app.module.ts
Han Che
  • 8,239
  • 19
  • 70
  • 116
  • 1
    In my biggest production size app in angular2 at the moment I have something like this - a section of code inside my app.component.html file thats outside the main router-outlet of the app that reads a list of buttons and routes from an app wide appStateService. It works quite well, only downside I have found so far is that you need to make sure that the bar is cleared and repopulated for every component. Your other option would be to create a component that you use in every component with the buttons it needs, but this will introduce some repetition. – peppermcknight Dec 05 '16 at 15:30
  • the project i'm working on is build for scale and I definitely want to utilize the navbar for contextual actions. Still I went for the repetitive way since they all can share the same styling and in makes working in teams easier to maintain i guess...thanks for your input! – Han Che Dec 05 '16 at 16:51

0 Answers0