This is a migrated thread and some comments may be shown as answers.

Tab issues - dynamic component loading and selected tab issue

3 Answers 8 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Saquib
Top achievements
Rank 1
Saquib asked on 20 Jan 2021, 12:11 PM

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>

3 Answers, 1 is accepted

Sort by
0
Saquib
Top achievements
Rank 1
answered on 20 Jan 2021, 02:21 PM

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.

 

 

 

0
Saquib
Top achievements
Rank 1
answered on 20 Jan 2021, 02:43 PM

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

0
Martin
Telerik team
answered on 22 Jan 2021, 10:35 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
TabStrip
Asked by
Saquib
Top achievements
Rank 1
Answers by
Saquib
Top achievements
Rank 1
Martin
Telerik team
Share this question
or