Tab selected event

[vin]

I am using (selected)="clickTabs()" method when i click a tab. It works fine.

But when i set  this.tabInstance.selectedItem = 1;

Looks like it is firing  clickTabs() method !! 

How can i avoid it???

@ViewChild('tabsElement', { static: false }) tabInstance: TabComponent;

 <ejs-tab #tabsElement id="tabsElement" (selected)="clickTabs($event, true)" class="e-fill">

[Satheesh Kumar Balasubramanian]

Hi Vin, 

  

Thanks for using Syncfusion Products. 

  

We have validated your reported query "Tab selected event" and let you know that we cannot prevent firing of tab selected event when we modify selectedItem property. But, we can prevent your code block execution using boolean check based on mouse event target in tab selecting event. For the same we have prepared the sample for your reference which can be viewed from the following link. 

  

Sample: https://stackblitz.com/edit/angular-prevent-code-block-inside-tab-selected-event?file=app.component.ts 

  

app.component.html:   

  <ejs-tab 

      #tab 

      id="tab_default" 

      heightAdjustMode="Auto" 

      (selected)="clickTabs($event)" 

      (selecting)="select($event)" 

   > 

......... 

  </ejs-tab> 

  

app.component.ts:   

export class AppComponent { 

  @ViewChild('tab') tabInstance: TabComponent; 

  public isClicked: boolean = false; 

  public btnClicked(e: ClickEventArgs): void { 

    this.tabInstance.selectedItem = 1; 

  } 

  public clickTabs(e: SelectEventArgs) { 

    if (this.isClicked) { 

      // Your code 

      this.isClicked = false; 

    } 

  } 

  public select(e: SelectingEventArgs) { 

    if (!isNullOrUndefined(e.event) && !isNullOrUndefined(e.event.target)) { 

      this.isClicked = true; 

    } 

  } 

} 

  

Kindly try the above sample and let us know if this meets your requirement. 

  

Regards, 

Satheesh Kumar B