How to make HTTP request when select tab

[belyan]

I have one component with multiple tabs. I am currently making several HTTP requests to get data for all tabs. To optimise the page loading speed, I want to make a request only for the default tab, and additional HTTP requests only when the user selects another tab.

How can I achieve this goal?

I know about structural directive ifActive, but I am not sure if I can use it to make HTTP requests conditionally.

[gnomeontherun]

Typically, using ifActive is the best way and then ensure that each tab has a different component inside of it. That way, ifActive will prevent them from loading until they are active, which means you can load HTTP requests using OnInit within the components inside of each tab. There could be other ways, by listening to click events or juggling things, but this would be my preference.

[belyan]

Hi @gnomeontherun, thank you for answer.

Yes, I agree with you, one of possible solutions is to split my component with tabs into several components. It will allow to have one separate component for every tab and I could load data for every tab using ngOnInit hook.

But what about another solutions? I don't want to listen click events. If memory serves me correctly, I saw an example in the Clarity documentation where tabs could be switched programmatically by changing the index of the active tab. Is any output event in tabs API that allows lo listen event when active tab was changed?

[gnomeontherun]

You can use Angular techniques to desugar the clrIfActive binding so you can also listen to the event. I haven't tested, but this is the basic syntax for how to desugar a structural directive, by putting an ng-template element around the component and splitting up the bindings.

<clr-tab *ngFor="let tab of tabs">
  <button clrTabLink>Dashboard</button>
  <ng-template [clrIfActive]="activeIndex == 1" (clrIfActiveChange)="activeTabChanged($event)">
    <clr-tab-content>
     ...
    </clr-tab-content>
  </ng-template>
</clr-tab>

[belyan]

Okay, I will try this approach. Thanks!