Tab issues - dynamic component loading and selected tab issue

[Saquib]

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>

[Saquib]

An example of 2 tabs appearing together as "selected". The highlighted line indicates the separation between the 2 components. Switching to the middle tab "fixes" the issue and then going to tab 1 or tab 3 will only shown the correct component for that tab.

 

 

 

[Saquib]

So can get it working by putting a delay into between the subject subscribe event and the selecting of the tab. Is the best/only solution?

 

this.sTabs.subscribe(tabs => {

      setTimeout(() => {
        tabs.forEach((tab, i) => {
          if (tab.selected) {
            this.tabstrip.selectTab(i)
          }
        })
      },50);

})

 

P.S. Can't edit posts so another post

[Martin Bechev]

Hello Saquib,

Thank you for the provided details.

Such behavior is probably caused by the Angular change detection mechanism. That is why using the setTimeout works as it triggers the change detection:

https://www.mokkapps.de/blog/the-last-guide-for-angular-change-detection-you-will-ever-need/#zonejs

Changing the selected property value is the right way to go. But it is not working as the reference is not changed. Thus the Angular Change detection mechanism is not triggered.

The setTimeout is a valid workaround but it is often avoided because of performance reasons. There are a few methods that help to change the reference collection such as slice method or the spread operator for array collections.

While the current workaround could be used as well, if you have the time could I ask you to prepare a runnable demo, or try to update this StackBlitz example, to a state that reproduces the issue. Thus we will be able to debug the code and check if there are other working solutions. Thank you in advance.

Regards,
Martin
Progress Telerik