0

I would need the not to lazy load the tabs with the clarity tab component, and be able to switch between the tabs programatically. The problem is if I appy the the directive mentioned it the docs [(clrIfActive)] the contetnt gets lazy loaded. Here is the documentation:https://v2.clarity.design/tabs

Gergő Éles
  • 119
  • 2
  • 7
  • So you *don't* want to lazy load the tabs? – Nicholas K Dec 17 '19 at 09:29
  • 1
    Please add more detail to this question - including @NicholasK 's comment - why do you want to avoid lazy loading? Is there a fundamental reason you wish to omit it, such as an issue with passing data around? What have you tried so far? – JsAndDotNet Dec 17 '19 at 09:35
  • From the link you posted `The tabs component uses the *clrIfActive structural directive to lazy load the content of an active tab.` Leaving it out should fix your issue. – Nicholas K Dec 17 '19 at 09:41

1 Answers1

2

If you want lazy loading, include the *clrIfActive directive in the clr-tab-content component markup, for example:

        <clr-tab-content id="content1" *clrIfActive>
        ...
        </clr-tab-content>

If you don't want lazy loading, leave *clrIfActive out.

paul
  • 21,653
  • 1
  • 53
  • 54
  • This way how is it posibble to programatically select the active tabs? – Gergő Éles Dec 17 '19 at 11:05
  • 1
    You will have to add template references to the tab link directive and use the activate fn manually: https://github.com/vmware/clarity/blob/master/src/clr-angular/layout/tabs/tab-link.directive.ts#L95 – hippeelee Dec 17 '19 at 12:52