Kendo UI Tabstrip Onclick event

Question

I am trying to have a onclick event when a button in second tab is clicked and it has to go to third tab. I have seen it in jquery but couldnt implement in TS with angular 4/6

import { Component } from '@angular/core';

@Component({
 selector: 'my-app',
 template: `
  <kendo-tabstrip id="tabstrip" kendo-tab-strip="tabstrip">
    <kendo-tabstrip-tab [title]="'Tab 1'">
      <ng-template kendoTabContent>
        <p>Tab 1 Content</p>
      </ng-template>
    </kendo-tabstrip-tab>
    <kendo-tabstrip-tab [title]="'Tab 2'" [selected]="true">
      <ng-template kendoTabContent>
        <p>Tab 2 Content</p>
       <button (click)="openApproachTab()" value="Approach"  class=" btn btn-accent m-btn m-btn--custom m-btn--icon m-btn--pill m-btn--air m-portlet__nav-link m-dropdown__toggle  ">
                            Start your budget</button>
      </ng-template>
    </kendo-tabstrip-tab>
    <kendo-tabstrip-tab [title]="'Tab 3'">
      <ng-template kendoTabContent>
        <p>Tab 3 Content</p>
      </ng-template>
    </kendo-tabstrip-tab>
  </kendo-tabstrip>
`,
styles: [`
    kendo-tabstrip p {
        margin: 0;
        padding: 8px;
    }
`]
})
export class AppComponent {

public openApproachTab()
{
   kendo-tabstrip.select(2);
}

  }

Wanted to see what type of code we need to write for onclick event openApproachTab

Answer 1

You don't need to write jQuery imperative code to handle tab selection. You can simply use the [selected] property binding on each tab, and maintain the same on each tab click inside selectedTab variable. So basically on click of openApproachTab you can directly set selectedTab variable to 2(3rd tab)

Html

<kendo-tabstrip (tabSelect)="onTabSelect($event)">
  <kendo-tabstrip-tab [title]="'Tab 1'" [selected]="selectedTab == 0">
    <ng-template kendoTabContent>
      <p>Tab 1 Content</p>
    </ng-template>
  </kendo-tabstrip-tab>
  <kendo-tabstrip-tab [title]="'Tab 2'" [selected]="selectedTab == 1">
    <ng-template kendoTabContent>
      <p>Tab 2 Content</p>
    <button (click)="openApproachTab()" value="Approach"  class=" btn btn-accent m-btn m-btn--custom m-btn--icon m-btn--pill m-btn--air m-portlet__nav-link m-dropdown__toggle  ">
      Start your budget</button>
    </ng-template>
  </kendo-tabstrip-tab>
  <kendo-tabstrip-tab [title]="'Tab 3'" [selected]="selectedTab == 2">
    <ng-template kendoTabContent>
      <p>Tab 3 Content</p>
    </ng-template>
  </kendo-tabstrip-tab>
</kendo-tabstrip>

Component

export class AppComponent {
    selectedTab = 1;
    public onTabSelect(e) {
      this.selectedTab = e.index
    }
    openApproachTab() {
      this.selectedTab = 2
    }
}

Demo Stackblitz