How would I go about creating a new tab for a data-bound list?
My current example is as follows:
TabDemo.component.html
<angularTabs>
<ul>
<li *ngFor"let tab of tabCollection">{{tab.TabName}}</li>
<li>+</li>
</ul>
<div *ngFor"let tab of tabCollection">
{{tab.TabContent}}
</div>
<div>Create new tab</div>
</angularTabs>
TabDemo.component.ts
...
this.myTabsComponent.OnTabclick.subscribe((event) => {
if (event.target.id !== this.myTabsComponent.host[0].id) {
return;
}
let title = this.myTabsComponent.getTitleAt(event.args.item);
if (title === '+') {
// create tab
this.tabService.addTab(<code>Tab ${event.args.item + 1}</code>).then(tabCreated => {
if(tabCreated){
this.loadTabs().then(tabs => { this.tabCollection = tabs; });
}
});
}
});
...
If i run the above, my tab component just resets. I have tried using the addTabAt method, but because my list is databound, this doesn’t work very well.
Additionally, inside my tabs are additional components that need to be loaded (per tab), how is this possible?
