fix(tabs): angular, fire willChange event before selected tab changes (#24910)

Co-authored-by: Sean Perkins <sean@ionic.io>

angular/src/directives/navigation/ion-tabs.ts

@@ -57,10 +57,10 @@ export class IonTabs {
   onPageSelected(detail: StackEvent): void {
     const stackId = detail.enteringView.stackId;
     if (detail.tabSwitch && stackId !== undefined) {
+      this.ionTabsWillChange.emit({ tab: stackId });
       if (this.tabBar) {
         this.tabBar.selectedTab = stackId;
       }
-      this.ionTabsWillChange.emit({ tab: stackId });
       this.ionTabsDidChange.emit({ tab: stackId });
     }
   }

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

@@ -19,6 +19,30 @@ describe('Tabs', () => {
       tab.find('.segment-changed').should('have.text', 'false');
     });
 
+    describe('when navigating between tabs', () => {
+
+      it('should emit ionTabsWillChange before setting the selected tab', () => {
+        cy.get('#ionTabsWillChangeCounter').should('have.text', '1');
+        cy.get('#ionTabsWillChangeEvent').should('have.text', 'account');
+        cy.get('#ionTabsWillChangeSelectedTab').should('have.text', '');
+
+        cy.get('#ionTabsDidChangeCounter').should('have.text', '1');
+        cy.get('#ionTabsDidChangeEvent').should('have.text', 'account');
+        cy.get('#ionTabsDidChangeSelectedTab').should('have.text', 'account');
+
+        cy.get('#tab-button-contact').click();
+
+        cy.get('#ionTabsWillChangeCounter').should('have.text', '2');
+        cy.get('#ionTabsWillChangeEvent').should('have.text', 'contact');
+        cy.get('#ionTabsWillChangeSelectedTab').should('have.text', 'account');
+
+        cy.get('#ionTabsDidChangeCounter').should('have.text', '2');
+        cy.get('#ionTabsDidChangeEvent').should('have.text', 'contact');
+        cy.get('#ionTabsDidChangeSelectedTab').should('have.text', 'contact');
+      })
+
+    });
+
     it('should simulate stack + double tab click', () => {
       let tab = getSelectedTab();
       tab.find('#goto-tab1-page2').click();

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

@@ -0,0 +1,5 @@
+#test {
+  position: absolute;
+  bottom: 100px;
+  left: 0;
+}

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

@@ -1,4 +1,4 @@
-<ion-tabs (ionTabsDidChange)="tabChanged($event)">
+<ion-tabs (ionTabsDidChange)="tabChanged($event)" (ionTabsWillChange)="tabsWillChange($event)">
   <ion-tab-bar>
     <ion-tab-button tab="account">
       <ion-label>Tab One</ion-label>
@@ -18,5 +18,29 @@
   </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-button id="tabs-state" style="width: 100px;">{{tabsDidChangeCounter}}.{{tabsDidChangeEvent}}</ion-fab-button>
 </ion-fab>
+<div id="test">
+  <ul>
+    <li>
+      ionTabsWillChange counter: <span id="ionTabsWillChangeCounter">{{ tabsWillChangeCounter }}</span>
+    </li>
+    <li>
+      ionTabsWillChange event: <span id="ionTabsWillChangeEvent">{{ tabsWillChangeEvent }}</span>
+    </li>
+    <li>
+      ionTabsWillChange selectedTab: <span id="ionTabsWillChangeSelectedTab">{{ tabsWillChangeSelectedTab }}</span>
+    </li>
+  </ul>
+  <ul>
+    <li>
+      ionTabsDidChange counter: <span id="ionTabsDidChangeCounter">{{ tabsDidChangeCounter }}</span>
+    </li>
+    <li>
+      ionTabsDidChange event: <span id="ionTabsDidChangeEvent">{{ tabsDidChangeEvent }}</span>
+    </li>
+    <li>
+      ionTabsDidChange selectedTab: <span id="ionTabsDidChangeSelectedTab">{{ tabsDidChangeSelectedTab }}</span>
+    </li>
+  </ul>
+</div>

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

@@ -1,15 +1,33 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { IonTabBar } from '@ionic/angular';
 
 @Component({
   selector: 'app-tabs',
   templateUrl: './tabs.component.html',
+  styleUrls: ['./tabs.component.css']
 })
 export class TabsComponent {
-  tabCounter = 0;
+  tabsDidChangeCounter = 0;
-  tabEvent = '';
+  tabsDidChangeEvent = '';
+  tabsDidChangeSelectedTab = '';
+
+  tabsWillChangeCounter = 0;
+  tabsWillChangeEvent = '';
+  tabsWillChangeSelectedTab = '';
+
+  @ViewChild(IonTabBar) tabBar: IonTabBar;
 
   tabChanged(ev: { tab: string }) {
-    this.tabCounter++;
+    console.log('ionTabsDidChange', this.tabBar.selectedTab);
-    this.tabEvent = ev.tab;
+    this.tabsDidChangeCounter++;
+    this.tabsDidChangeEvent = ev.tab;
+    this.tabsDidChangeSelectedTab = this.tabBar.selectedTab;
+  }
+
+  tabsWillChange(ev: { tab: string }) {
+    console.log('ionTabsWillChange', this.tabBar.selectedTab);
+    this.tabsWillChangeCounter++;
+    this.tabsWillChangeEvent = ev.tab;
+    this.tabsWillChangeSelectedTab = this.tabBar.selectedTab;
   }
 }