The "Problem"
While working on a simple application I wanted to show some content in the title / header bar, but this should be only vis...
For further actions, you may consider blocking this person and/or reporting abuse
Hi!
I’d follow this approach:
Then, in your directive, you’d inject the ActivatedRoute and the ViewContainerRef and based on your logic, you’d render one component from the array(meaning that you’d also inject DYNAMIC_HEADER_INJECTOR).
Hi :)
Back to topic:
I haven't thought about doing this with injection tokens, lets play it out:
but wouldn't it be then like in the
1st solution
?The components would have to be registered and imported to the AppModule which ends-up raising the initial load of your app
Thats why I wanted to have it loaded only where it really needed to be (and not in the AppModule in my case)
or did I misunderstood your idea?
No, you’re right.
I think there is a way to mitigate this issue, but this implies more work from the developer.
If we don’t want to include the component in the main bundle, we can put it in its module and in the directive, based on some conditions, you can load the module on demand by using import(path/to/module).then() and injecting the compiler.
Yeah like you wrote, another way would be to lazy-load the components of it, there are some helper libaries for this.
I also have one 😁
Lazy Loaded Components - #4 NPM-Package
negue ・ Dec 25 ・ 2 min read
Thanks for sharing!
I’m skeptical about libraries, but I do like to explore them!
That's a cool article. Not sure why it hasn't more likes and stuff. Because of Christmas maybe?
Hehe thank you!
Yeah I wish I'd know why ^^, maybe not enough tags?
Maybe the point of time when you posted this? I also found that a little advertisement on Twitter and Reddit helps.
When is the best time to post? I don't really have a clue there ^^
On my next I'll try twitter / reddit
As for my own posts I can definitely say that they received more attention on regular work days. Apart from that I am really not sure :)
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.
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".
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.