0

I'd like to lazy load an Angular NgModule in conjunction with the activation of a Clarity tab. The content of the tab will contain a component of the lazy-loaded module, like this:

<clr-tabs>
  <clr-tab>
    <button clrTabLink id="link1">Tab 1</button>
    <clr-tab-content id="content1" *clrIfActive>
      <component-in-lazy-loaded-module></component-in-lazy-loaded-module>
    </clr-tab-content>
  </clr-tab>
</clr-tabs>

Is there an event I can tap into to lazy-load the module before the content is loaded when the tab is activated? After reviewing the Clarity docs, it's not entirely clear how this can be accomplished.

I'm open to using Angular Router in conjunction with Clarity tabs, as lazy-loading using the router is straightforward. I found an example of someone using <router-outlet> inside of each tab here, but it seems a little hokey, as you have the same router outlet in every <clr-tab-content>, and I'm not sure if there are any side-effects or performance impacts for this.

Any advice on this is greatly appreciated.

obsessiveprogrammer
  • 1,344
  • 1
  • 9
  • 8
  • 1
    There is actually a limitation in Angular right now where lazy loading is tied to the router. The reason you have to put a router-outlet multiple times is that the content of a tab is destroyed (clrIfActive) and a new tab must have it included. – Jeremy Wilken Mar 16 '18 at 18:20
  • There actually are ways to load modules with code, but they are pretty ugly, and you have to know a lot about the Angular internals. I'd sooner shy away from that and use the router. Thanks for the feedback. – obsessiveprogrammer Mar 16 '18 at 19:19

0 Answers0