bug: ion-tabs in angular doesn't use the custom event interface

[rtpHarry]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

ion-tabs has a custom event TabsCustomEvent but its not used anywhere:

export interface TabsCustomEvent extends CustomEvent {
  detail: { tab: string };
  target: HTMLIonTabsElement;
}

The two events on the component just define their own object:

  /**
   * Emitted when the navigation is about to transition to a new component.
   */
  @Event({ bubbles: false }) ionTabsWillChange!: EventEmitter<{ tab: string }>;

  /**
   * Emitted when the navigation has finished transitioning to a new component.
   */
  @Event({ bubbles: false }) ionTabsDidChange!: EventEmitter<{ tab: string }>;

Expected Behavior

It should use the custom event.

Steps to Reproduce

Define an ion-tab and attempt to handle the event on it such as:

Markup

<ion-tabs (ionTabsDidChange)="onTabsDidChange($event)">
</ion-tabs>

Code

  onTabsDidChange(event: TabsCustomEvent) {
  }

Error

Argument of type '{ tab: string; }' is not assignable to parameter of type 'TabsCustomEvent'.
  Type '{ tab: string; }' is missing the following properties from type 'TabsCustomEvent': detail, target, initCustomEvent, bubbles, and 20 more.ngtsc(2345)
tabs.page.ts(6, 3): Error occurs in the template of component TabsPage.

Code Reproduction URL

No response

Ionic Info

Ionic:

   Ionic CLI                     : 7.1.5 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 7.6.6
   @angular-devkit/build-angular : 16.2.12
   @angular-devkit/schematics    : 16.2.12
   @angular/cli                  : 16.2.12
   @ionic/angular-toolkit        : 9.0.0

Capacitor:

   Capacitor CLI      : 5.6.0
   @capacitor/android : 5.6.0
   @capacitor/core    : 5.6.0
   @capacitor/ios     : 5.6.0

Utility:

   cordova-res : not installed globally
   native-run  : 2.0.1

System:

   NodeJS : v18.12.0 (/usr/local/bin/node)
   npm    : 8.19.2
   OS     : macOS Unknown

Additional Information

No response

[liamdebeasi]

Thanks for the report. The problem here is ion-tabs in Angular is just an Angular component and does not emit a CustomEvent. As a result, the type signature on that is always doing to be { tab: string }. This is confusing because the ion-tabs Web Component (used in vanilla JS apps) emits a CustomEvent. I'm going to move this to the docs repo so we can make this clearer. The following should fix the issue in your app:

onTabsDidChange(ev: { tab: string }) {
}