feat(angular): add standalone tabs (#28093)

Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?

Tabs cannot be used as a standalone component.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Added tabs as a standalone component.
- Added a quick test. I included the event checking from the lazy test
in the HTML as a smoke check, but didn't bring over the Cypress tests
for them since I noticed the other standalone tests have been quick,
stripped down affairs. I'm assuming I would just be duplicating effort.
Let me know if I should bring more tests over from the lazy version, or
even get rid of the event logging from the standalone HTML.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts

@@ -16,6 +16,16 @@ export const routes: Routes = [
       { path: 'overlay-controllers', loadComponent: () => import('../overlay-controllers/overlay-controllers.component').then(c => c.OverlayControllersComponent) },
       { path: 'button', loadComponent: () => import('../button/button.component').then(c => c.ButtonComponent) },
       { path: 'icon', loadComponent: () => import('../icon/icon.component').then(c => c.IconComponent) },
+      { path: 'tabs', redirectTo: '/standalone/tabs/tab-one', pathMatch: 'full' },
+      {
+        path: 'tabs',
+        loadComponent: () => import('../tabs/tabs.component').then(c => c.TabsComponent),
+        children: [
+          { path: 'tab-one', loadComponent: () => import('../tabs/tab1.component').then(c => c.TabOneComponent) },
+          { path: 'tab-two', loadComponent: () => import('../tabs/tab2.component').then(c => c.TabTwoComponent) },
+          { path: 'tab-three', loadComponent: () => import('../tabs/tab3.component').then(c => c.TabThreeComponent) }
+        ]
+      },
     ]
   },
 ];

packages/angular/test/base/src/app/standalone/tabs/tab1.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-tab-one',
+  template: `
+    Tab 1
+  `,
+  standalone: true,
+})
+export class TabOneComponent {
+
+}

packages/angular/test/base/src/app/standalone/tabs/tab2.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-tab-two',
+  template: `
+    Tab 2
+  `,
+  standalone: true,
+})
+export class TabTwoComponent {
+
+}

packages/angular/test/base/src/app/standalone/tabs/tab3.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-tab-three',
+  template: `
+    Tab 3
+  `,
+  standalone: true,
+})
+export class TabThreeComponent {
+
+}

packages/angular/test/base/src/app/standalone/tabs/tabs.component.html

@@ -0,0 +1,42 @@
+<ion-tabs (ionTabsDidChange)="tabChanged($event)" (ionTabsWillChange)="tabsWillChange($event)">
+  <ion-tab-bar>
+    <ion-tab-button tab="tab-one">
+      <ion-label>Tab One</ion-label>
+      <ion-icon name="add"></ion-icon>
+    </ion-tab-button>
+
+    <ion-tab-button tab="tab-two">
+      <ion-label>Tab Two</ion-label>
+      <ion-icon name="logo-ionic"></ion-icon>
+    </ion-tab-button>
+
+    <ion-tab-button tab="tab-three">
+      <ion-label>Tab Three</ion-label>
+      <ion-icon name="save"></ion-icon>
+    </ion-tab-button>
+  </ion-tab-bar>
+</ion-tabs>
+<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>

packages/angular/test/base/src/app/standalone/tabs/tabs.component.ts

@@ -0,0 +1,38 @@
+import { Component, ViewChild } from '@angular/core';
+import { IonTabBar, IonTabButton, IonIcon, IonLabel, IonTabs } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { add, logoIonic, save } from 'ionicons/icons';
+
+addIcons({ add, logoIonic, save });
+
+@Component({
+  selector: 'app-tabs',
+  templateUrl: './tabs.component.html',
+  standalone: true,
+  imports: [IonTabBar, IonTabButton, IonIcon, IonLabel, IonTabs]
+})
+export class TabsComponent {
+  tabsDidChangeCounter = 0;
+  tabsDidChangeEvent = '';
+  tabsDidChangeSelectedTab? = '';
+
+  tabsWillChangeCounter = 0;
+  tabsWillChangeEvent = '';
+  tabsWillChangeSelectedTab? = '';
+
+  @ViewChild(IonTabBar) tabBar!: IonTabBar;
+
+  tabChanged(ev: { tab: string }) {
+    console.log('ionTabsDidChange', this.tabBar.selectedTab);
+    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;
+  }
+}