htmlangularkendo-tabstripkendo-angular-ui

Unable to set default tab conditionally in a kendo-tabstrip


In my angular project, I have a page which has 3 controls. Through those controls, I want to open one single popup independently. The popup has 3 tabs. I want to set each tab as a default tab for each control. In order to open the popup, I am also sending queryparams to get the data.

Control Example

<div class="col-2"><a [routerLink]="[]" [queryParams]="{Id: id}"></a></div>

Tabstrip Example

<kendo-tabstrip #TabStrip>
    <kendo-tabstrip-tab [selected]="What to do here" title="Tab1">
<ng-content>
</ng-content>
 </kendo-tabstrip-tab>
<kendo-tabstrip-tab [selected]="What to do here" title="Tab2">
<ng-content>
</ng-content>
 </kendo-tabstrip-tab>
<kendo-tabstrip-tab [selected]="What to do here" title="Tab3">
<ng-content>
</ng-content>
 </kendo-tabstrip-tab>

The page and popup are not parent-child component, and I have to pass the queryparams

Any kind of assistance will be welcomed


Solution

  • I found the solution. I solved it using @HostListener in angular. For more details https://observingsoftware.blogspot.com/2023/01/conditionalsettingofkendotabstrip.html