How to perform a template function on the <Kendo-tabstrip-tab> component

Question

I have a component in which a part of this component has that part:

  <kendo-tabstrip-tab [title]="'Categoria'" [disabled]="ReferenciaMktId == '00000000-0000-0000-0000-000000000000'" [selected]="false">
    <ng-template kendoTabContent (click)="carregaCategorias()">
      <div class=' w-100'>
        <form [formGroup]="formGroup">
          <div class="row d-flex justify-content-center my-2">
            <h5>Cadastro Geral da referência</h5>
          </div>
          <div class="d-flex justify-content-center mx-3">
            <div *ngIf="formGroup.invalid" class="error-msg">
              <div *ngIf="formGroup.touched" class="text-danger"><small>*Os
                  Campos em destaque são obrigatórios</small>
              </div>
            </div>
          </div>
        </form>
      </div>
    </ng-template>
  </kendo-tabstrip-tab>

I need you to click on the Kendo-tabstrip-tab component I call a certain function, but nothing seems to work.

What I tried to:

  <kendo-tabstrip-tab (click)="teste()" [title]="'Categoria'" [disabled]="ReferenciaMktId == '00000000-0000-0000-0000-000000000000'" [selected]="false">

also tried:

  <kendo-tabstrip-tab (change)="teste()" [title]="'Categoria'" [disabled]="ReferenciaMktId == '00000000-0000-0000-0000-000000000000'" [selected]="false">

TS:

teste(){
    console.log('entrou')
  }

Clicking on the element shows nothing in the console.

Answer 1

Hello,

This component you are using has a method that takes the click, looking at the documentation I believe is (tabSelect), you can replace the function of (click) by this function (tabSelect), you will have the same result. Stay like this: (tabSelect)="test()".

Obs: When we use ready-made libraries they usually have specific ways of doing some basic functions like this, so (click) didn’t work. Here is an example: example of use