Dynamic header bars and/or contents for your Ivy Angular App
You may need to have different header bars and/or contents for example for different types of users. Let’s check how to do it.
Note:
If you are not with Angular Ivy (angular 8 and below). You can take a look to my post in this github issue where i added a good link demo to help you manually lazy load a module in old angular versions.
If you are with Ivy enabled, just continue reading the article a solution is presented.
Scenario 1: dynamic header bars with same content
Solution 1
Check the online demo for this solution 1.
In this solution 1, we use a named router-outlet to handle the header bar . Unfortunately the lazy loading with loadChildrenand named router-outlet has a bug in Angular right now.
Bug Github issue -> https://github.com/angular/angular/issues/12842
This demo end up with this error in the log:
⛔ So for now this solution 1 with `loadChildren` is not working but it may one day. ⛔
Solution 2
Check the online demo for this solution 2.
In this solution 2, we make use of this article. So we route to aHeaderbarSelectorComponent and then we lazy load the right module with a standard conditional from inside this component.
In the demo2, You can toggle the 2 headerbars by using the button toggle user type in the body of the page then reloading the page.
❤️ This solution is working perfectly as you can see in the demo.❤️
Scenario 2: dynamic header bars with dynamic contents
Apply same strategy as scenario1/solution2 for the dynamic content load.
You found this post helpful! give it some 👏👏👏.
Thank you
