I've created my layout based on nested router-outlets: // Has no Toolbar { path: ROUTENAMES.LOGIN, component: LoginPageComponent }, // Has a Toolbar { path: '', component: AppLayoutComponent, // Introduces the Toolbar children: [ { path: ROUTENAMES.LIST, component: ListComponent }, { path: ROUTENAMES.EDIT, component: EditComponent }, { path: ROUTENAMES.OTHER, component: OtherComponent }, ] } The toolbar contains a menu (general items like "logout", "profile", ...). In that menu I'd like to add more menu items based on the route. So in ListComponent I'd like to add a menu item "Add new Object" but in "EditComponent" I'd like to add an item "Back to List". Up until now I didn't do it with nested router-outlets but rather a "PageOutlineComponent" that contained <ng-content [select]="additionalitems"> and wrapped every component with this PageOutlineComponent. Then I could add more items by <div additionalitems>my special item</div>. My question: How would I accomplish this dynamic menu without content projection? As far as I understood the approach with the nested router-outlets is the "cleaner" way of doing things. Continue reading...
