Dynamic tabs..

[msalehisedeh]

Lets say you have a set of tabs you want to display but the tabs are direct result of a response you have from a remote http get request or a database fetch.. in this case the list of tabs you have will be available at a later time. Therefore, in order to display tabs correctly, you have two options.

• 1. use "ngIf" on "flexible-tabs" tag,
• 2. call "ngAfterContentInit()" method on "FlexibleTabsComponent" host component when you set the list items.

<flexible-tabs position="right" type="button" message="click to select tab "  *ngIf="myDynamicList && myDynamicList.length" (onchange)="ontabselection($event)">
  <flexible-tab *ngFor="let item of  myDynamicList, let x = index" [title]="item.name">
    <h3> information {{x}}</h3>
    This is a simple tab content that will be rendered immediately even if tab is not selected.  
  </flexible-tab>
</flexible-tabs>

OR

<flexible-tabs #myFlexibleTab

and in your typescript file
@ChildView("myFlexibleTab")
myFlexibleTab: FlexibleTabsComponent;

myFetchResopnseMethod() {
 this.myService.getMyTabsList(triggeringId).subscribe(
   (success) => {
      myFlexibleTab.tabs = success.body; 
      myFlexibleTab.ngAfterContentInit();
});

However, if some of the tabs are dynamic and some are predefined, then Only option 1 will bare result for you.