Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

content: Angular "Exiting the App" example exits from pages nested under ion-tabs

Open Beginner friendly
  • Is something wrong?
#4,804 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
82/100
Issue type
Documentation
Clarity
Clearly specified
Activity status
Active
Tech stack
angular, typescript
Domain
documentation

Research direction

Read docs/developing/hardware-back-button.mdx and versioned_docs/version-v8/developing/hardware-back-button.mdx, then compare the Angular tabs examples with the reported behavior for nested pages. Update both examples and the accompanying sentence about querying IonRouterOutlet with @ViewChild to use the suggested NavController.pop() flow. Done when both versions explain and show back navigation for tab stacks before exiting at the root.

Written by the indexing model from the issue text.

Description

content
URL

https://ionicframework.com/docs/developing/hardware-back-button#exiting-the-app

Issue Description

The Angular examples under "Exiting the App" query the root IonRouterOutlet with @ViewChild and exit when canGoBack() is false. In an app that uses ion-tabs, pages inside a tab are stacked in the tab's own outlet, so the root outlet's stack only ever holds the tabs page and canGoBack() is always false. On a page such as /tabs/home/detail, pressing the hardware back button exits the app instead of going back to /tabs/home.

Measured on @ionic/angular 9.0.9:

Layout, page Root outlet canGoBack() NavController.pop() resolves Example
Flat, one page deep true true stays
Flat, root false false exits
Tabs, /tabs/home/detail false true exits (wrong)
Tabs, /tabs/home false false exits

NavController.pop() walks from the active outlet up through its parents, so its result is the reliable signal. Suggested replacement for both Angular tabs (import from @ionic/angular/lazy for the modules example):

import { Component, inject } from '@angular/core';
import { NavController, Platform } from '@ionic/angular';
import { App } from '@capacitor/app';

@Component({ ... })
export class AppComponent {
  private platform = inject(Platform);
  private navCtrl = inject(NavController);

  constructor() {
    this.platform.backButton.subscribeWithPriority(1, async () => {
      const popped = await this.navCtrl.pop();
      if (!popped) {
        App.exitApp();
      }
    });
  }
}

Priority 1 runs before the built-in navigation handler (priority 0) and after menus and overlays (99 and 100), so it takes over the back navigation itself. The sentence about querying IonRouterOutlet with @ViewChild would need to change with it.

Both docs/developing/hardware-back-button.mdx and versioned_docs/version-v8/developing/hardware-back-button.mdx carry the same example.

Reported in ionic-team/ionic-framework#31598.

Dominant language
MDX
Stars
620
Forks
3.2k
Avg merge
15h 17m
Merged PRs (30d)
52

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from ionic-team/ionic-docs

All issues in ionic-team/ionic-docs

Similar issues

More Documentation issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.