CODEWITHSUNDEEP
angulartabsionic3
Vik
Vik

Reputation: 9319

ionic 3: creating a tab dynamically and selecting it

I am using ionic 3 angular and building a web application. One of the requirement i am having is a tabs component with first tab showing a list. clicking each of list item creates a new tab and shows some contents.

The way I implemented it is:

<ion-tabs #myTabs tabsPlacement="top" tabsLayout="icon-end">
  <ion-tab *ngFor="let tb of core.dynamicTabs" [root]="tb.pageName" tabTitle="{{tb.tabTitle}}" tabIcon="close" (ionSelect)="onTabActive($event)"></ion-tab>
</ion-tabs>

I am keeping a shared array to store tab related data like

@Injectable()
export class CoreStructureProvider {
  dynamicTabs: any[];

  constructor(public http: Http) {
    this.dynamicTabs = [{ "pageName": MyListPage, "tabTitle": rw.name, "optyId": rw.OptyId }];
  }
}

So from the first tab's page the code to create new tabs is:

createTab(rw){
  this.core.dynamicTabs.push({ "pageName": EditOptyPage, "tabTitle": rw.name, "optyId": rw.OptyId });
  (this.navCtrl.parent).select(1)

}

Everything works great except the tab selection. Just to simplify the problem i hardcode value to 1. So ideally everytime createTab is called the 2nd tab should be selected.

But here is the behavior that i am seeing: when you come first time: there is just one tab showing the list. you click one of the items on the list and a new tab gets created. however that does not become the active tab.

now click one more time on any other link in the list and this time and from now onwards the 2nd tab becomes active.

So I am not sure why first time this does not trigger?

Upvotes: 1

Views: 1370

Answers (1)

Philip Brack
Philip Brack

Reputation: 1328

Based on some research on ionic forum, people indicate that there is an issue with the digest for setting the tab. So you must call your method asynchronously in the future

setTimeout(()={(this.navCtrl.parent).select(1)},100);

100 is just a random number I selected.

Upvotes: 1

Related Questions