fix(angular): adds tabs stack

core/src/components.d.ts

@@ -4500,6 +4500,7 @@ export namespace Components {
     */
     'select': (tab: string | HTMLIonTabElement) => Promise<boolean>;
     'setRouteId': (id: string) => Promise<RouteWrite>;
+    'useRouter': boolean;
   }
   interface IonTabsAttributes extends StencilHTMLAttributes {
     /**
@@ -4518,6 +4519,7 @@ export namespace Components {
     * Emitted when the navigation will load a component.
     */
     'onIonNavWillLoad'?: (event: CustomEvent<void>) => void;
+    'useRouter'?: boolean;
   }
 
   interface IonText {

core/src/components/tab-bar/tab-bar-interface.ts

@@ -6,5 +6,6 @@ export interface TabBarChangedDetail {
 
 export interface TabButtonClickDetail {
   tab: string;
+  selected: boolean;
   href?: string;
 }

core/src/components/tab-button/tab-button.tsx

@@ -74,7 +74,8 @@ export class TabButton implements ComponentInterface {
     if (!this.disabled) {
       this.ionTabButtonClick.emit({
         tab: this.tab,
-        href: this.href
+        href: this.href,
+        selected: this.selected
       });
     }
     ev.preventDefault();

core/src/components/tabs/readme.md

@@ -87,6 +87,13 @@ Using tabs with Angular's router is fairly straight forward. The only additional
 <!-- Auto Generated Below -->
 
 
+## Properties
+
+| Property    | Attribute    | Description | Type      | Default |
+| ----------- | ------------ | ----------- | --------- | ------- |
+| `useRouter` | `use-router` |             | `boolean` | `false` |
+
+
 ## Events
 
 | Event              | Description                                                                | Detail                   |

core/src/components/tabs/tabs.tsx

@@ -11,7 +11,6 @@ export class Tabs implements NavOutlet {
 
   private transitioning = false;
   private leavingTab?: HTMLIonTabElement;
-  private useRouter = false;
 
   @Element() el!: HTMLStencilElement;
 
@@ -21,6 +20,9 @@ export class Tabs implements NavOutlet {
   @Prop({ context: 'config' }) config!: Config;
   @Prop({ context: 'document' }) doc!: Document;
 
+  /** @internal */
+  @Prop({ mutable: true }) useRouter = false;
+
   /**
    * Emitted when the tab changes.
    */
@@ -42,7 +44,9 @@ export class Tabs implements NavOutlet {
   @Event() ionNavDidChange!: EventEmitter<void>;
 
   async componentWillLoad() {
-    this.useRouter = !!this.doc.querySelector('ion-router') && !this.el.closest('[no-router]');
+    if (!this.useRouter) {
+      this.useRouter = !!this.doc.querySelector('ion-router') && !this.el.closest('[no-router]');
+    }
     this.tabs = Array.from(this.el.querySelectorAll('ion-tab'));
     this.ionNavWillLoad.emit();
     this.componentWillUpdate();
@@ -69,9 +73,9 @@ export class Tabs implements NavOutlet {
   protected onTabClicked(ev: CustomEvent<TabButtonClickDetail>) {
     const { href, tab } = ev.detail;
     const selectedTab = this.tabs.find(t => t.tab === tab);
-    if (this.useRouter && href !== undefined) {
+    if (this.useRouter) {
       const router = this.doc.querySelector('ion-router');
-      if (router) {
+      if (router && href !== undefined) {
         router.push(href);
       }
     } else if (selectedTab) {