Skip to content

fix(angular): populate tabs outlet before initial ionTabsWillChange - #31677

Open
duongynhi000005-oss wants to merge 1 commit into
ionic-team:mainfrom
duongynhi000005-oss:fix-issue-31674-tabs-outlet-will-change
Open

duongynhi000005-oss wants to merge 1 commit into
ionic-team:mainfrom
duongynhi000005-oss:fix-issue-31674-tabs-outlet-will-change

Conversation

@duongynhi000005-oss

Copy link
Copy Markdown

Issue number: resolves #31674


What is the current behavior?

When ion-tabs renders after the router has already activated a child tab route (for example behind *ngIf / @if, or when hosted under Angular's <router-outlet> instead of ion-router-outlet), the inner <ion-router-outlet #outlet> activates the initial tab during IonTabs' first change detection pass before the non-static @ViewChild('outlet') query resolves. As a result, tabs.outlet is undefined inside the first ionTabsWillChange handler, and calling tabs.getSelected() throws TypeError: Cannot read properties of undefined (reading 'getActiveStackId').

What is the new behavior?

  • Pass the #outlet template reference into onStackWillChange($event, outlet) in both the standalone (packages/angular/src/standalone/navigation/tabs.ts) and lazy (packages/angular/src/lazy/directives/navigation/ion-tabs.ts) IonTabs templates.
  • Populate this.outlet in IonTabs.onStackWillChange (packages/angular/src/common/directives/navigation/tabs.ts) before emitting ionTabsWillChange if the @ViewChild query has not populated it yet.
  • Add E2E regression tests for both standalone and lazy IonTabs verifying tabs.outlet is defined and tabs.getSelected() does not throw on the initial ionTabsWillChange emission when ion-tabs initializes after route activation.

Does this introduce a breaking change?

  • Yes
  • No

Other information

onStackWillChange's second outlet parameter is optional so existing internal/subclass call sites remain backward-compatible.

Pass the `#outlet` template reference into `onStackWillChange` in both
standalone and lazy `IonTabs` templates and assign `this.outlet` prior
to emitting `ionTabsWillChange` when the `@ViewChild` query has not
resolved yet.

Resolves ionic-team#31674
@duongynhi000005-oss
duongynhi000005-oss requested a review from a team as a code owner October 30, 2026 23:41
@vercel

vercel Bot commented Oct 30, 2026

Copy link
Copy Markdown

@duongynhi000005-oss is attempting to deploy a commit to the Ionic Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions github-actions Bot added the package: angular @ionic/angular package label Oct 30, 2026

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: angular @ionic/angular package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

bug: IonTabs.outlet is undefined when the first ionTabsWillChange fires (standalone Angular)

1 participant