feat(many): use tabs without router outlet

core/api.txt

@@ -1754,6 +1754,7 @@ ion-tab-button,css-prop,--ripple-color,md
 ion-tab-button,part,native
 
 ion-tabs,shadow
+ion-tabs,prop,noOutlet,boolean,false,false,false
 ion-tabs,method,getSelected,getSelected() => Promise<string | undefined>
 ion-tabs,method,getTab,getTab(tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>
 ion-tabs,method,select,select(tab: string | HTMLIonTabElement) => Promise<boolean>

core/src/components.d.ts

@@ -2953,6 +2953,7 @@ export namespace Components {
           * @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.
          */
         "getTab": (tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>;
+        "noOutlet": boolean;
         /**
           * Select a tab by the value of its `tab` property or an element reference. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.
           * @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.
@@ -7727,6 +7728,7 @@ declare namespace LocalJSX {
         "target"?: string | undefined;
     }
     interface IonTabs {
+        "noOutlet"?: boolean;
         /**
           * Emitted when the navigation will load a component.
          */

core/src/components/tabs/tabs.tsx

@@ -22,6 +22,8 @@ export class Tabs implements NavOutlet {
 
   @State() selectedTab?: HTMLIonTabElement;
 
+  @Prop() noOutlet = false;
+
   /** @internal */
   @Prop({ mutable: true }) useRouter = false;
 
@@ -42,7 +44,7 @@ export class Tabs implements NavOutlet {
   @Event({ bubbles: false }) ionTabsDidChange!: EventEmitter<{ tab: string }>;
 
   async componentWillLoad() {
-    if (!this.useRouter) {
+    if (!this.useRouter && !this.noOutlet) {
       this.useRouter = !!document.querySelector('ion-router') && !this.el.closest('[no-router]');
     }
     if (!this.useRouter) {

core/stencil.config.ts

@@ -26,7 +26,6 @@ const getAngularOutputTargets = () => {
 
     // tabs
     'ion-tabs',
-    'ion-tab',
 
     // auxiliar
     'ion-picker-legacy-column',
@@ -177,7 +176,6 @@ export const config: Config = {
         'ion-back-button',
         'ion-tab-button',
         'ion-tabs',
-        'ion-tab',
         'ion-tab-bar',
 
         // Overlays

packages/angular/common/src/directives/navigation/tabs.ts

@@ -7,6 +7,8 @@ import {
   HostListener,
   Output,
   ViewChild,
+  Input,
+  AfterViewInit,
 } from '@angular/core';
 
 import { NavController } from '../../providers/nav-controller';
@@ -17,14 +19,18 @@ import { StackDidChangeEvent, StackWillChangeEvent } from './stack-utils';
   selector: 'ion-tabs',
 })
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
-export abstract class IonTabs implements AfterContentInit, AfterContentChecked {
+export abstract class IonTabs implements AfterViewInit, AfterContentInit, AfterContentChecked {
   /**
    * Note: These must be redeclared on each child class since it needs
    * access to generated components such as IonRouterOutlet and IonTabBar.
    */
   abstract outlet: any;
   abstract tabBar: any;
   abstract tabBars: any;
+  abstract tabs: any;
+
+  private selectedTab?: any;
+  private leavingTab?: any;
 
   @ViewChild('tabsInner', { read: ElementRef, static: true }) tabsInner: ElementRef<HTMLDivElement>;
 
@@ -39,8 +45,23 @@ export abstract class IonTabs implements AfterContentInit, AfterContentChecked {
 
   private tabBarSlot = 'bottom';
 
+  @Input() noOutlet = false;
+
   constructor(private navCtrl: NavController) {}
 
+  ngAfterViewInit(): void {
+    if (this.noOutlet) {
+      const tabs = this.tabs;
+      const selectedTab = tabs.get(0);
+
+      if (tabs.length > 0) {
+        this.select(selectedTab.tab);
+      }
+
+      this.tabBar.selectedTab = selectedTab.tab;
+    }
+  }
+
   ngAfterContentInit(): void {
     this.detectSlotChanges();
   }
@@ -53,6 +74,10 @@ export abstract class IonTabs implements AfterContentInit, AfterContentChecked {
    * @internal
    */
   onStackWillChange({ enteringView, tabSwitch }: StackWillChangeEvent): void {
+    if (this.noOutlet) {
+      return;
+    }
+
     const stackId = enteringView.stackId;
     if (tabSwitch && stackId !== undefined) {
       this.ionTabsWillChange.emit({ tab: stackId });
@@ -63,12 +88,13 @@ export abstract class IonTabs implements AfterContentInit, AfterContentChecked {
    * @internal
    */
   onStackDidChange({ enteringView, tabSwitch }: StackDidChangeEvent): void {
+    if (this.noOutlet) {
+      return;
+    }
+
     const stackId = enteringView.stackId;
     if (tabSwitch && stackId !== undefined) {
-      if (this.tabBar) {
-        this.tabBar.selectedTab = stackId;
-      }
-      this.ionTabsDidChange.emit({ tab: stackId });
+      this.tabSwitch(stackId);
     }
   }
 
@@ -96,6 +122,18 @@ export abstract class IonTabs implements AfterContentInit, AfterContentChecked {
   select(tabOrEvent: string | CustomEvent): Promise<boolean> | undefined {
     const isTabString = typeof tabOrEvent === 'string';
     const tab = isTabString ? tabOrEvent : (tabOrEvent as CustomEvent).detail.tab;
+
+    if (this.noOutlet) {
+      const selectedTab = this.tabs.find((t: any) => t.tab === tab);
+      this.leavingTab = this.selectedTab;
+      this.selectedTab = selectedTab;
+
+      this.ionTabsWillChange.emit({ tab: selectedTab.tab });
+      this.tabSwitch();
+      selectedTab.setActive();
+      return Promise.resolve(true);
+    }
+
     const alreadySelected = this.outlet.getActiveStackId() === tab;
     const tabRootUrl = `${this.outlet.tabsPrefix}/${tab}`;
 
@@ -143,6 +181,10 @@ export abstract class IonTabs implements AfterContentInit, AfterContentChecked {
   }
 
   getSelected(): string | undefined {
+    if (this.noOutlet) {
+      return this.selectedTab?.tab;
+    }
+
     return this.outlet.getActiveStackId();
   }
 
@@ -189,4 +231,22 @@ export abstract class IonTabs implements AfterContentInit, AfterContentChecked {
       this.tabsInner.nativeElement.after(tabBar);
     }
   }
+
+  private tabSwitch(stackId?: string): void {
+    const selectedTab = this.selectedTab;
+    const selectedTabValue = stackId ?? selectedTab.tab;
+    const leavingTab = this.leavingTab;
+
+    if (this.tabBar) {
+      this.tabBar.selectedTab = selectedTabValue;
+    }
+
+    if (this.noOutlet && leavingTab.tab !== selectedTab.tab) {
+      if (leavingTab) {
+        leavingTab.active = false;
+      }
+    }
+
+    this.ionTabsDidChange.emit({ tab: selectedTabValue });
+  }
 }

packages/angular/src/app-initialize.ts

@@ -20,7 +20,7 @@ export const appInitialize = (config: Config, doc: Document, zone: NgZone) => {
 
       return applyPolyfills().then(() => {
         return defineCustomElements(win, {
-          exclude: ['ion-tabs', 'ion-tab'],
+          exclude: ['ion-tabs'],
           syncQueue: true,
           raf,
           jmp: (h: any) => zone.runOutsideAngular(h),

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

@@ -1,7 +1,8 @@
-import { Component, ContentChild, ContentChildren, ViewChild, QueryList } from '@angular/core';
+import { Component, ContentChild, ContentChildren, ViewChild, QueryList, Input } from '@angular/core';
 import { IonTabs as IonTabsBase } from '@ionic/angular/common';
 
 import { IonTabBar } from '../proxies';
+import { IonTab } from '../proxies';
 
 import { IonRouterOutlet } from './ion-router-outlet';
 
@@ -10,7 +11,9 @@
   template: `
     <ng-content select="[slot=top]"></ng-content>
     <div class="tabs-inner" #tabsInner>
+      <ng-content *ngIf="noOutlet" select="ion-tab"></ng-content>
       <ion-router-outlet
+        *ngIf="!noOutlet"
         #outlet
         tabs="true"
         (stackWillChange)="onStackWillChange($event)"
@@ -52,4 +55,7 @@
 
   @ContentChild(IonTabBar, { static: false }) tabBar: IonTabBar | undefined;
   @ContentChildren(IonTabBar) tabBars: QueryList<IonTabBar>;
+  @ContentChildren(IonTab) tabs: QueryList<IonTab>;
+
+  @Input() noOutlet = false;
 }

packages/angular/src/directives/proxies-list.ts

@@ -74,6 +74,7 @@ export const DIRECTIVES = [
   d.IonSkeletonText,
   d.IonSpinner,
   d.IonSplitPane,
+  d.IonTab,
   d.IonTabBar,
   d.IonTabButton,
   d.IonText,

packages/angular/src/directives/proxies.ts

@@ -2148,6 +2148,29 @@ export declare interface IonSplitPane extends Components.IonSplitPane {
 }
 
 
+@ProxyCmp({
+  inputs: ['component', 'tab'],
+  methods: ['setActive']
+})
+@Component({
+  selector: 'ion-tab',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['component', 'tab'],
+})
+export class IonTab {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface IonTab extends Components.IonTab {}
+
+
 @ProxyCmp({
   inputs: ['color', 'mode', 'selectedTab', 'translucent']
 })

packages/angular/standalone/src/directives/proxies.ts

@@ -69,6 +69,7 @@ import { defineCustomElement as defineIonSelectOption } from '@ionic/core/compon
 import { defineCustomElement as defineIonSkeletonText } from '@ionic/core/components/ion-skeleton-text.js';
 import { defineCustomElement as defineIonSpinner } from '@ionic/core/components/ion-spinner.js';
 import { defineCustomElement as defineIonSplitPane } from '@ionic/core/components/ion-split-pane.js';
+import { defineCustomElement as defineIonTab } from '@ionic/core/components/ion-tab.js';
 import { defineCustomElement as defineIonTabBar } from '@ionic/core/components/ion-tab-bar.js';
 import { defineCustomElement as defineIonTabButton } from '@ionic/core/components/ion-tab-button.js';
 import { defineCustomElement as defineIonText } from '@ionic/core/components/ion-text.js';
@@ -1939,6 +1940,31 @@ export declare interface IonSplitPane extends Components.IonSplitPane {
 }
 
 
+@ProxyCmp({
+  defineCustomElementFn: defineIonTab,
+  inputs: ['component', 'tab'],
+  methods: ['setActive']
+})
+@Component({
+  selector: 'ion-tab',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['component', 'tab'],
+  standalone: true
+})
+export class IonTab {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface IonTab extends Components.IonTab {}
+
+
 @ProxyCmp({
   defineCustomElementFn: defineIonTabBar,
   inputs: ['color', 'mode', 'selectedTab', 'translucent']

packages/angular/standalone/src/navigation/tabs.ts

@@ -1,7 +1,8 @@
-import { Component, ContentChild, ContentChildren, ViewChild, QueryList } from '@angular/core';
+import { Component, ContentChild, ContentChildren, ViewChild, QueryList, Input } from '@angular/core';
 import { IonTabs as IonTabsBase } from '@ionic/angular/common';
 
 import { IonTabBar } from '../directives/proxies';
+import { IonTab } from '../directives/proxies';
 
 import { IonRouterOutlet } from './router-outlet';
 
@@ -10,7 +11,9 @@
   template: `
     <ng-content select="[slot=top]"></ng-content>
     <div class="tabs-inner" #tabsInner>
+      <ng-content *ngIf="noOutlet" select="ion-tab"></ng-content>
       <ion-router-outlet
+        *ngIf="!noOutlet"
         #outlet
         tabs="true"
         (stackWillChange)="onStackWillChange($event)"
@@ -54,4 +57,7 @@
 
   @ContentChild(IonTabBar, { static: false }) tabBar: IonTabBar | undefined;
   @ContentChildren(IonTabBar) tabBars: QueryList<IonTabBar>;
+  @ContentChildren(IonTab) tabs: QueryList<IonTab>;
+
+  @Input() noOutlet = false;
 }

packages/react/src/components/inner-proxies.ts

@@ -4,6 +4,7 @@ import { defineCustomElement as defineIonBackButton } from '@ionic/core/componen
 import { defineCustomElement as defineIonRouterOutlet } from '@ionic/core/components/ion-router-outlet.js';
 import { defineCustomElement as defineIonTabBar } from '@ionic/core/components/ion-tab-bar.js';
 import { defineCustomElement as defineIonTabButton } from '@ionic/core/components/ion-tab-button.js';
+import { defineCustomElement as defineIonTabs } from '@ionic/core/components/ion-tabs.js';
 import type { JSX as IoniconsJSX } from 'ionicons';
 import { defineCustomElement as defineIonIcon } from 'ionicons/components/ion-icon.js';
 
@@ -19,6 +20,10 @@ export const IonTabBarInner = /*@__PURE__*/ createReactComponent<JSX.IonTabBar,
   undefined,
   defineIonTabBar
 );
+export const IonTabsInner = /*@__PURE__*/ createReactComponent<
+  JSX.IonTabs,
+  HTMLIonTabsElement
+>('ion-tabs', undefined, undefined, defineIonTabs);
 export const IonBackButtonInner = /*@__PURE__*/ createReactComponent<
   Omit<JSX.IonBackButton, 'icon'>,
   HTMLIonBackButtonElement

packages/react/src/components/navigation/IonTabs.tsx

@@ -5,6 +5,7 @@ import { NavContext } from '../../contexts/NavContext';
 import PageManager from '../../routing/PageManager';
 import { HTMLElementSSR } from '../../utils/HTMLElementSSR';
 import { IonRouterOutlet } from '../IonRouterOutlet';
+import { IonTabsInner } from '../inner-proxies';
 
 import { IonTabBar } from './IonTabBar';
 import type { IonTabsContextState } from './IonTabsContext';
@@ -91,7 +92,7 @@ export const IonTabs = /*@__PURE__*/ (() =>
     render() {
       let outlet: React.ReactElement<{}> | undefined;
       let tabBar: React.ReactElement | undefined;
-      const { className, onIonTabsDidChange, onIonTabsWillChange, ...props } = this.props;
+      const { className, onIonTabsDidChange, onIonTabsWillChange, noOutlet, ...props } = this.props;
 
       const children =
         typeof this.props.children === 'function'
@@ -144,13 +145,24 @@ export const IonTabs = /*@__PURE__*/ (() =>
         }
       });
 
-      if (!outlet) {
+      if (!outlet && !noOutlet) {
         throw new Error('IonTabs must contain an IonRouterOutlet');
       }
+
+      // Should we also warn about including IonTab when noOutlet is false?
+
+      if (noOutlet && outlet) {
+        throw new Error('IonTabs must not contain an IonRouterOutlet when using the noOutlet prop');
+      }
+
       if (!tabBar) {
         throw new Error('IonTabs needs a IonTabBar');
       }
 
+      if (!outlet) {
+        return <IonTabsInner {...props}></IonTabsInner>;
+      }
+
       return (
         <IonTabsContext.Provider value={this.ionTabContextState}>
           {this.context.hasIonicRouter() ? (