TabStrip with *ngFor and Angular ChangeDetection

[Katharina]

Hi all together,

I'm creating a TabStrip dynamically inside my component with *ngFor with a tabs array. But only some tabs are rendered inside my browser, even if there are more tabs inside my array. The other tabs will appear, if I just click into my browser page. Each click let appear another of the missing tabs, until all tabs are there.

I have a big application with many pages and content and I removed everything now except the tabstrip (even the tab content I removed) to find the problem. The simplified code is this (and here you also see the error):

This is my typescript code inside the component:

public tabs: Subject<Array<any>> = new Subject<Array<any>>();

public ngAfterViewInit(): void {

    let tabs: Array<any> = [];
    tabs.push({
      title: this.i18NextService.t("KONTAKTDATEN", { ns: "KontakteTexts" }) ?? "",
      titleId: "kontaktdaten",
    });
    tabs.push({
      title: this.i18NextService.t("MITARBEITER", { ns: "KontakteTexts" }) ?? "",
      titleId: "mitarbeiter",
    });
    tabs.push({
      title: this.i18NextService.t("PORTFOLIO", { ns: "KontakteTexts" }) ?? "",
      titleId: "portfolio",
    });
    tabs.push({
      title: this.i18NextService.t("STANDARDAUFTRAEGE", { ns: "KontakteTexts" }) ?? "",
      titleId: "standardauftraege",
    });
    tabs.push({
      title: this.i18NextService.t("INFRASTRUKTUR", { ns: "KontakteTexts" }) ?? "",
      titleId: "infrastruktur",
    });
    tabs.push({
      title: this.i18NextService.t("NOTES", { ns: "NewsTexts" }) ?? "",
      titleId: "notes",
    });
    tabs.push({
      title: this.i18NextService.t("EXTERNE_DOKUMENTE", { ns: "ExterneDokumenteTexts" }) ?? "",
      titleId: "dokumente",
    });

    this.tabs.next(tabs);
    this.changeDetection.detectChanges();
}

And here is the html:

To see, what is inside my tabs array, I've just added the first ngFor to write down the tab titles.

<div *ngFor="let tab of tabs | async">
      <div>{{ tab.title }}</div>
    </div>
    <div class="k-tabstrip-wrapper">
      <kendo-tabstrip>
        <kendo-tabstrip-tab *ngFor="let tab of tabs | async" cssClass="k-tab-on-top" [title]="tab.title">
          <ng-template kendoTabContent></ng-template>
        </kendo-tabstrip-tab>
      </kendo-tabstrip>
    </div>

When you run the application you see the following:

As you can see, the tabs array contains 7 entries, but Kendo only displays 2 tabs. They are there, but not displayed. It seems to be that Angulars Change Detection is not running or the interaction between Angular and Kendo is not correct. This is why I run the detectChanges. I've also tried it with and without a async tabs array, with ngZone and so on. But everytime it is the same result.

 

I also recognized, that some of my menu entries are not displayed (same here, after clicking inside the page they appear - it's another component), but only if this tabstrip is inside my page. So my main interest is to fix this tab issue...

 

Do you have any ideas what is going wrong here? Any ideas how to solve it? I cannot add the tabs in a static way to my html page, because the tabs array is not static, like here in the example...

 

Thanks for your ideas,

Regards,

Katharina

[Georgi]

Hi Katharina,

Thank you very much for the details provided.

Based on the information and the code snippets provided in the thread so far, I tried reproducing the issue with the Kendo UI for Angular TabStrip component. However, it seems like I might be missing out on some of the reproduction steps since the TabStrip seems to behave according to the expectations on my side, and all its tabs are rendered.

For your reference, I am attaching to this response the StackBlitz demo where I performed the testing:

• https://stackblitz.com/edit/angular-b8qqme4v

Since I want to avoid misunderstandings and provide the maximum utility out of the support service, I would ask you to provide more detailed information about the specifics of the implementation or, ideally, a small runnable example demonstrating the exact discrepancy(modifying the above-mentioned StackBlitz demo would also be helpful). This would allow me to gain a better understanding of the exact scenario, reproduce the issue on my side, debug it, and thus come up with a more suitable suggestion.

I am looking forward to your reply.

Regards,
Georgi
Progress Telerik

[Katharina]

Thank you Gerogi for your help! I found the problem and put the solution into the answer

[Georgi]

Hi Katharina,

I am happy to hear that you have managed to resolve the issue.

I am now closing this thread(it will remain publicly visible). Please, do not hesitate to reach out if you need any more details.

Regards,
Georgi
Progress Telerik

[Katharina]

I finally found the problem. It was the Kendo version. I used Kendo for Angular 15.1.0 together with Angular 17.3.5.  Now I switched to Kendo for Angular 15.3.0 together with Angular 17.3.5 and it works now as expected