i have a design where i am have tabs created on the fly. I am doing that using a ngFor in tab as below:
<ion-tabs name="dynTabs" tabsPlacement="top" tabsLayout="icon-end">
<ion-tab *ngFor="let tb of core.dynamicTabs" [root]="tb.pageName" tabTitle="{{tb.tabTitle}}" tabIcon="{{tb.tabIcon}}" (ionSelect)="onTabActive($event)"></ion-tab>
</ion-tabs>
The core.dynamicTabs is a shared array containing info for individual tabs. First tab is added in the array when user visitng this page containing the tabs as follows:
this.core.dynamicTabs.push({"pageName": OptyListPage, "tabTitle" : "Opportunities", "optyId": "", "tabIcon":"" });
From the OptyListPage there is a button to add more tabs on the fly. the code looks like below:
createTab(rw){
this.core.dynamicTabs.push( { "pageName": EditOptyPage, "tabTitle" : rw.name, "optyId": rw.OptyId, "tabIcon":"close" });
this.event.publish('new-tab-launched', this.core.dynamicTabs.length -1 );
This all works great. The EditOptyPage has a close button to close these tabs. The code looks like:
close(){
this.core.dynamicTabs.splice(this.currentTab,1)
}
However, doing this does not really remove the tab. It actually removes the page it seems. Please advise.