Lazy loading of tab's content

[ItsAncientCoder]

Hi Team,

I have 2+ static tabs in my tabset. I want to load only tab1 content on page loading and other tab's content on each tab selection.

Code snippet: <div class="container> <tabset> <tab heading="1"> <child [someInput]="input"></child> </tab> <tab heading="2"> <child [someInput]="input"></child> </tab> More tabs.... </tabset> </div>

Please suggest. Thank you in advance.

[arun-maddheshia]

Hi @bandhammanikanta

you can use like below

// use (selectTab) event

activeTab: string;

<div class="container>
 <tabset>
    <tab heading="1"
    (selectTab)="onSelectTab($event)">
  <child [someInput]="input"></child>
  </tab>
  <tab heading="2">
    <child *ngIf="activeTab === 'one' [someInput]="input"></child>
  </tab>
    More tabs....
  </tabset>
</div>

onSelectTab(tabData: TabDirective) {
    const currentTab = tabData.heading.toLowerCase();
    if (currentTab === '1') {
      // some output emitter or decorator or service to notify the child component to load the data ...
      or simply show/hide component based on activeTab status
     this.activeTab = 'one';
    }
  }

[ItsAncientCoder]

Thank you arun :).

I have implemented your approach. please see the snippets below.

parent.ts: @ViewChild(ChildComponent) childComponent: ChildComponent; ` public onSelectTab(event: any) { const heading = event.heading; let data = null; if (heading === '1') { data = this.someMap.get(heading); } else if(heading ==='2') { data = this.someMap.get(heading); } this.childComponent.loadData(data); }`

child.ts:

public loadData(query:any){ this.someService.loadData().subscribe(data=>{ this.resp = data; console.log(this.resp); }); }

child.html: <div> {{resp}} </div>

but, the data is not getting rendered in the tab1/tab2. but i can see console.log(this.resp); in console. Please suggest

[arun-maddheshia]

@bandhammanikanta I have update the answer please look into activeTab so you don't need to expose your child component

[ludmilanesvitiy]

@bandhammanikanta If you want to ask a general question, use StackOverflow or Slack instead https://stackoverflow.com/questions/tagged/ngx-bootstrap https://ngx-home.slack.com/ @arun-maddheshia Thank you for help.

[ahmadalsadder]

@ludmilanesvitiy could you please add me to that work space ngx-home.slack.com/? this is my email a.alsader@tahaluf.ae