feat(angular): add tabs events (#17125)

* feat(angular): add tabs events

* lint

angular/test/test-app/e2e/src/tabs.e2e-spec.ts

@@ -13,6 +13,7 @@ describe('tabs', () => {
     it('should redirect and load tab-account', async () => {
       await testTabTitle('Tab 1 - Page 1');
       await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1']);
+      await testState(1, 'account');
     });
 
     it('should simulate stack + double tab click', async () => {
@@ -20,36 +21,44 @@ describe('tabs', () => {
       await tab.$('#goto-tab1-page2').click();
       await testTabTitle('Tab 1 - Page 2');
       await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab1-nested']);
+      await testState(1, 'account');
       expect(await tab.$('ion-back-button').isDisplayed()).toBe(true);
 
       await element(by.css('#tab-button-contact')).click();
       await testTabTitle('Tab 2 - Page 1');
       await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab1-nested', 'app-tabs-tab2']);
+      await testState(2, 'contact');
 
       await element(by.css('#tab-button-account')).click();
       tab = await testTabTitle('Tab 1 - Page 2');
       await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab1-nested', 'app-tabs-tab2']);
+      await testState(3, 'account');
       expect(await tab.$('ion-back-button').isDisplayed()).toBe(true);
 
       await element(by.css('#tab-button-account')).click();
       await testTabTitle('Tab 1 - Page 1');
       await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab2']);
+      await testState(3, 'account');
     });
 
     it('should simulate stack + back button click', async () => {
       const tab = await getSelectedTab();
       await tab.$('#goto-tab1-page2').click();
       await testTabTitle('Tab 1 - Page 2');
+      await testState(1, 'account');
 
       await element(by.css('#tab-button-contact')).click();
       await testTabTitle('Tab 2 - Page 1');
+      await testState(2, 'contact');
 
       await element(by.css('#tab-button-account')).click();
       await testTabTitle('Tab 1 - Page 2');
+      await testState(3, 'account');
 
       await element(by.css('ion-back-button')).click();
       await testTabTitle('Tab 1 - Page 1');
       await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab2']);
+      await testState(3, 'account');
     });
 
     it('should switch tabs and go back', async () => {
@@ -123,6 +132,10 @@ describe('tabs', () => {
   });
 });
 
+async function testState(count: number, tab: string) {
+  expect(await element(by.css('#tabs-state')).getText()).toEqual(`${count}.${tab}`);
+}
+
 async function testTabTitle(title: string) {
   await waitTime(600);
   const tab = await getSelectedTab();

angular/test/test-app/src/app/tabs/tabs.component.html

@@ -1,4 +1,4 @@
-<ion-tabs>
+<ion-tabs (ionTabsDidChange)="tabChanged($event)">
   <ion-tab-bar>
     <ion-tab-button tab="account">
       <ion-label>Tab One</ion-label>
@@ -17,3 +17,6 @@
 
   </ion-tab-bar>
 </ion-tabs>
+<ion-fab horizontal="end" vertical="top">
+  <ion-fab-button id="tabs-state" style="width: 100px;">{{tabCounter}}.{{tabEvent}}</ion-fab-button>
+</ion-fab>

angular/test/test-app/src/app/tabs/tabs.component.ts

@@ -4,4 +4,12 @@ import { Component } from '@angular/core';
   selector: 'app-tabs',
   templateUrl: './tabs.component.html',
 })
-export class TabsComponent { }
+export class TabsComponent {
+  tabCounter = 0;
+  tabEvent = '';
+
+  tabChanged(ev: {tab: string}) {
+    this.tabCounter++;
+    this.tabEvent = ev.tab;
+  }
+}