CODEWITHSUNDEEP
angularkendo-ui
bla
bla

Reputation: 1055

How i can call one function in click event of the <kendo-tabstrip-tab> component?

I have this kendo-tabstrip-tab:

<kendo-tabstrip tabPosition="left">
    <kendo-tabstrip-tab (change)="test()" [title]="'Geral'" [selected]="true">
        <ng-template kendoTabContent>
              test
        </ng-template>
    </kendo-tabstrip-tab>
</kendo-tabstrip>

When i click in the kendo-tabstrip-tab i need to call the function test() that print the event in my ts component:

  test(event){
    console.log('i don't receive this console...')
  }

But when i click in kendo-tabstrip-tab no one event is being called. Don't have documentation of this component, only the parent component (kendo-tabstrip) and i need to call functions when kendo-tabstrip-tab is changed.

I also tried:

(click)="test()"

But it's not calling the function when i click...

Upvotes: 0

Views: 1568

Answers (2)

Poul Kruijt
Poul Kruijt

Reputation: 71911

There is no @Output defined on the TabStripTabComponent, as you can read.

You should use the tabSelect event on the TabStripComponent, this will trigger an event which will contain the index number of the selected tab.

<kendo-tabstrip tabPosition="left" (tabSelect)="onSelectTab($event)">
  <kendo-tabstrip-tab (change)="test()" [title]="'Geral'" [selected]="true">
    <ng-template kendoTabContent>
      test
    </ng-template>
  </kendo-tabstrip-tab>
</kendo-tabstrip>

Upvotes: 2

penleychan
penleychan

Reputation: 5470

https://www.telerik.com/kendo-angular-ui/components/layout/api/TabStripComponent/ tabSelect does what you need to do, it contains the index value of the tabs.

<kendo-tabstrip (tabSelect)="onTabSelect($event)">
    ...
</kendo-tabstrip>

where onTabSelect($event)

public onTabSelect(e) {
    console.log(e);
}

https://stackblitz.com/edit/angular-c8o5ff?file=app/app.component.ts

Upvotes: 2

Related Questions