How to use select EventEmitter Angular 2 TabstripComponent

Question

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">&nbsp;</span>
            <div class="weather">
                  <h2>17<span>&ordm;C</span></h2>
                  <p>Rainy weather in Paris.</p>
            </div>
       </kendo-tabstrip-tab>
       <kendo-tabstrip-tab [title]="'New York'" (select)="onTabSelected()">
            <span class="sunny">&nbsp;</span>
            <div class="weather">
                  <h2>29<span>&ordm;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.

You'll need to look into the documentation for the `kendo-tabstrip-tab` component. This is not a built-in Angular 2 feature. Where did you see info about its `select` event? — BeetleJuice, Oct 12 '16 at 04:04
@BeetleJuice select event is part of `kendo-tabstrip` component. Please check my answer below. — Sanket, Oct 12 '16 at 05:28

score 2 · Answer 1 · answered Oct 05 '17 at 19:12

The tabSelect event of the TabStripComponent worked for me.

In the component template:

<kendo-tabstrip (tabSelect)="onTabSelected($event)">
   <kendo-tabstrip-tab [title]="'tab1'" [selected]="true">
        Kendo UI - Tab Strip Demo
   </kendo-tabstrip-tab>
   ....
   ....

In the component class:

onTabSelected(event: any){
     console.log('Tab Title: ' + event.title);
 }

Reference: http://www.telerik.com/kendo-angular-ui/components/layout/api/TabStripComponent/

Sanket · Accepted Answer · 2016-10-12T05:26:15.417

1

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/

edited Oct 12 '16 at 05:26

answered Oct 12 '16 at 05:19

Sanket

19,295
10
71
82

FYI - June 2018 - I needed to change "(select)" to "(tabSelect)" as per cstewart's answer below, to get it to work. (No doubt Telerik have changed this over time). – Marty131 Jun 19 '18 at 06:11

How to use select EventEmitter Angular 2 TabstripComponent

2 Answers2