From 9c425dcd4c466768b06d0055154bdc6bf1711352 Mon Sep 17 00:00:00 2001 From: ShaneK Date: Tue, 6 Oct 2026 12:01:45 -0700 Subject: [PATCH] docs(hardware-back-button): query IonRouterOutlet with @ViewChild in Angular exit app example --- docs/developing/hardware-back-button.mdx | 24 +++++++++---------- .../developing/hardware-back-button.mdx | 24 +++++++++---------- 2 files changed, 24 insertions(+), 24 deletions(-) diff --git a/docs/developing/hardware-back-button.mdx b/docs/developing/hardware-back-button.mdx index 5ae0b32a07..eed9f7fdb8 100644 --- a/docs/developing/hardware-back-button.mdx +++ b/docs/developing/hardware-back-button.mdx @@ -314,18 +314,17 @@ document.addEventListener('ionBackButton', (event: BackButtonEvent) => { ```tsx -import { Optional } from '@angular/core'; +import { ViewChild } from '@angular/core'; import { IonRouterOutlet, Platform } from '@ionic/angular/lazy'; import { App } from '@capacitor/app'; ... -constructor( - private platform: Platform, - @Optional() private routerOutlet?: IonRouterOutlet -) { +@ViewChild(IonRouterOutlet, { static: true }) routerOutlet?: IonRouterOutlet; + +constructor(private platform: Platform) { this.platform.backButton.subscribeWithPriority(-1, () => { - if (!this.routerOutlet.canGoBack()) { + if (this.routerOutlet && !this.routerOutlet.canGoBack()) { App.exitApp(); } }); @@ -336,18 +335,17 @@ constructor( ```tsx -import { Optional } from '@angular/core'; +import { ViewChild } from '@angular/core'; import { IonRouterOutlet, Platform } from '@ionic/angular'; import { App } from '@capacitor/app'; ... -constructor( - private platform: Platform, - @Optional() private routerOutlet?: IonRouterOutlet -) { +@ViewChild(IonRouterOutlet, { static: true }) routerOutlet?: IonRouterOutlet; + +constructor(private platform: Platform) { this.platform.backButton.subscribeWithPriority(-1, () => { - if (!this.routerOutlet.canGoBack()) { + if (this.routerOutlet && !this.routerOutlet.canGoBack()) { App.exitApp(); } }); @@ -396,6 +394,8 @@ This example shows the application exiting when the user presses the hardware ba It is recommended to check whether or not the user is on the root page prior to exiting the application. Developers can use the `canGoBack` method on `IonRouterOutlet` in Ionic Angular and `IonRouter` in Ionic React and Ionic Vue. +In Ionic Angular, `IonRouterOutlet` can only be injected into components rendered inside the outlet. The component whose template contains `ion-router-outlet`, such as `AppComponent`, should query it with `@ViewChild`, as demonstrated in the example above. + ## Internal Framework Handlers {/* #internal-framework-handlers */} The table below lists all of the internal hardware back button event handlers that Ionic Framework uses. The `Propagates` column notes whether or not that particular handler tells Ionic Framework to call the next back button handler. diff --git a/versioned_docs/version-v8/developing/hardware-back-button.mdx b/versioned_docs/version-v8/developing/hardware-back-button.mdx index 22646de197..7bb9f38904 100644 --- a/versioned_docs/version-v8/developing/hardware-back-button.mdx +++ b/versioned_docs/version-v8/developing/hardware-back-button.mdx @@ -314,18 +314,17 @@ document.addEventListener('ionBackButton', (event: BackButtonEvent) => { ```tsx -import { Optional } from '@angular/core'; +import { ViewChild } from '@angular/core'; import { IonRouterOutlet, Platform } from '@ionic/angular'; import { App } from '@capacitor/app'; ... -constructor( - private platform: Platform, - @Optional() private routerOutlet?: IonRouterOutlet -) { +@ViewChild(IonRouterOutlet, { static: true }) routerOutlet?: IonRouterOutlet; + +constructor(private platform: Platform) { this.platform.backButton.subscribeWithPriority(-1, () => { - if (!this.routerOutlet.canGoBack()) { + if (this.routerOutlet && !this.routerOutlet.canGoBack()) { App.exitApp(); } }); @@ -336,18 +335,17 @@ constructor( ```tsx -import { Optional } from '@angular/core'; +import { ViewChild } from '@angular/core'; import { IonRouterOutlet, Platform } from '@ionic/angular/standalone'; import { App } from '@capacitor/app'; ... -constructor( - private platform: Platform, - @Optional() private routerOutlet?: IonRouterOutlet -) { +@ViewChild(IonRouterOutlet, { static: true }) routerOutlet?: IonRouterOutlet; + +constructor(private platform: Platform) { this.platform.backButton.subscribeWithPriority(-1, () => { - if (!this.routerOutlet.canGoBack()) { + if (this.routerOutlet && !this.routerOutlet.canGoBack()) { App.exitApp(); } }); @@ -396,6 +394,8 @@ This example shows the application exiting when the user presses the hardware ba It is recommended to check whether or not the user is on the root page prior to exiting the application. Developers can use the `canGoBack` method on `IonRouterOutlet` in Ionic Angular and `IonRouter` in Ionic React and Ionic Vue. +In Ionic Angular, `IonRouterOutlet` can only be injected into components rendered inside the outlet. The component whose template contains `ion-router-outlet`, such as `AppComponent`, should query it with `@ViewChild`, as demonstrated in the example above. + ## Internal Framework Handlers The table below lists all of the internal hardware back button event handlers that Ionic Framework uses. The `Propagates` column notes whether or not that particular handler tells Ionic Framework to call the next back button handler.