I have an app with 4 ion-tabs like example below:

I would like that in some cases disable the ion-tab and if user try click in this disabled tabs the application will display a modal message for them. As we already know, if we disable an "ion-tab: or a "button" we cannot get the eventLister. So I'm trying to get this click event and stopPropagation() but it`s not working. Could you please help me?

take a look my code

#My ion-tabs

<ion-tabs #myTabs *ngIf="showTabs">
   <ion-tab *ngFor="let tab of tabs" [root]="tab.root" [tabTitle]="tab.title" [tabIcon]="tab.icon"
(ionSelect)="selectPage($event)" (ionChange)=selectedTab($event)></ion-tab>

#in my .ts file I tried this I get all tabs element and put a css style to simulate disabled adding a class ''.isDisabled'

const tabs = document.querySelectorAll('.tab-button');

for (let i = 1; i < tabs.length; i++) {
   tabs[i].classList.add('isDisabled');
}

here I'm trying get the tab element in position 1 and get the eventLister

tabs[1].addEventListener('click', function (e) {
  e.stopPropagation();
  alert('teste');
});

I can get this eventListener but the e.stopPropagation() is not working.

any suggestion to help me? thanks. ;)

$css

  .isDisabled {
  cursor: not-allowed;
  position: relative;
  opacity: 0.5;
  text-decoration: none;
  //pointer-events: none;
}