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
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
}
}