I building a component in Angular which dynamically builds a list of tabs and then loads content into the tab dynamically. In the main this works well bar a couple of intermitted issues.
The HTML for the tab component is as below. sTabs is a Subject which contains the list of tabs to render, including the component to load and the currently selected tab.
I am using the library https://malkevich-alex.gitbook.io/ng-dynamic-component/ to load the component dynamically.
The 2 issues I have are;
1 - occasionally the selected tab is not show (even though the debug of the value selected in the title shows true the tab does not get focus)
2 - occasionally 2 components are shown together in a tab (one below another). Clicking into another tab and then clicking back fixes this and the correct component is then shown.
Any ideas on the cause?
<
kendo-tabstrip
[keepTabContent]="true">
<
kendo-tabstrip-tab
*
ngFor
=
"let item of sTabs | async let i=index"
[selected]="item.selected">
<
ng-template
kendoTabTitle >
<
span
class
=
"k-icon k-i-close-outline"
(click)="deleteTab(i)"
style
=
"padding-right: 10px;"
></
span
>
<
span
>{{ item.name }} {{ item.selected }}</
span
>
</
ng-template
>
<
ng-template
kendoTabContent>
<
ndc-dynamic
[ndcDynamicComponent]="item.component"
[ndcDynamicInputs]="item.inputs"
[ndcDynamicOutputs]="item.outputs"
>
</
ndc-dynamic
>
</
ng-template
>
</
kendo-tabstrip-tab
>
</
kendo-tabstrip
>