#104394
dilbert
Participant

The other thing I’ve tried is to use an ngFor to define the tabs:

<smart-tabs #tabs id="tabs" class="demoTabsShort" [closeButtons]="true" [closeButtonMode]="'selected'"
[addNewTab]="true" (addNewTabClick)="onAddNewTabClick($event)" [reorder]="true">
    <smart-tab-item *ngFor="let tab of tabNames" [label]="tab"><app-thing></app-thing></smart-tab-item>
</smart-tabs>

Where tabNames is just a list of strings.

When a new tab is added (by appending a new string to the tabNames array), the content of the new tab is the new component. However, the label is not updated and there is an error in the console:

core.mjs:8506 ERROR TypeError: Cannot read properties of undefined (reading 'firstElementChild')
    at BaseElement._updateTabLabel (smart.tabs.js:34:65344)
    at BaseElement.propertyChangedHandler (smart.tabs.js:34:1110)
    at t.updateProperty (smart.button.js:34:75016)
    at BaseElement.set [as label] (smart.button.js:34:76150)
    at set label [as label] (smart-webcomponents-…ular-tabs.js:771:54)
    at Object.ngOnChangesSetInput [as setInput] (core.mjs:1586:26)
    at setInputsForProperty (core.mjs:11738:17)
    at elementPropertyInternal (core.mjs:10874:9)
    at Module.ɵɵproperty (core.mjs:13637:9)
    at AppComponent_smart_tab_item_6_Template (app.component.html:5:50)
  • This reply was modified 1 year, 4 months ago by dilbert.