Please let me know the exact syntax for angular 2 tab on select event. I was trying something like as following :
@Component({
selector: 'my-app',
template: `
<kendo-tabstrip>
<kendo-tabstrip-tab [title]="'Paris'" (select)="onTabSelected()">
<span class="rainy"> </span>
<div class="weather">
<h2>17<span>ºC</span></h2>
<p>Rainy weather in Paris.</p>
</div>
</kendo-tabstrip-tab>
<kendo-tabstrip-tab [title]="'New York'" (select)="onTabSelected()">
<span class="sunny"> </span>
<div class="weather">
<h2>29<span>ºC</span></h2>
<p>Sunny weather in New York.</p>
</div>
</kendo-tabstrip-tab>
</kendo-tabstrip>
`
})
class AppComponent {
public onTabSelected() {
console.log('index');
}
}
But it didn't work for me.
select EventEmitter is part of kendo-tabstrip (TabstripComponent) and not kendo-tabstrip-tab (TabstripTabComponent)
You can use it like this-
<kendo-tabstrip (select)="onTabSelected($event)">
<kendo-tabstrip-tab [title]="'tab1'" [selected]="true">
Kendo UI - Tab Strip Demo
</kendo-tabstrip-tab>
....
....
and in component you can read title like this-
onTabSelected(event: any){
console.log('Tab Title: ' + event.title);
}
Reference: http://www.telerik.com/kendo-angular-ui/components/layout/api/TabstripComponent/