DEV Community

Discussion on: Dynamic Layout parts in Angular

Collapse
 
jwp profile image
John Peters

Just an idea. Create a header component with just a ngcontent tag.

Now create a Header1 and Header2 component. On each page inject header1 or header2.

You can default the header component to header1 and use flags to hide it when header2 is injected.

You can also use grid template areas for "header" "main" and "footer" areas.

Collapse
 
negue profile image
negue

Hey!

yeah this could be also a valid workaround too. If every (lazy-loaded) page has its own header/content/footer then this would be a valid option.

In my projects I mostly want to have the header only once created in a root (or the App itself) and under that header, comes the <router-outlet></router-outlet>.

But yeah then comes the niche-issue "I want to have a different header just for this one route".

Also this was just one example for those dynamic layouts there probably many more, which I haven't encountered yet, but probably will help me in the long run :D

Collapse
 
jwp profile image
John Peters

Understood, that design requires a smart overideable header component. Something easily done using Event services. But will still require notification when other header is wanted.