JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Tabs › Add angular component to tab › Reply To: Add angular component to tab
February 14, 2023 at 4:16 pm
#104394
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, 6 months ago by
dilbert.