Skip to content

docs(angular): fix hardware back button exit example #4776

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ShaneK wants to merge 1 commit into
base: main
Choose a base branch
from
Open

docs(angular): fix hardware back button exit example #4776

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions docs/developing/hardware-back-button.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -314,18 +314,17 @@ document.addEventListener('ionBackButton', (event: BackButtonEvent) => {
<TabItem value="angular">

```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();
}
});
Expand All @@ -336,18 +335,17 @@ constructor(
<TabItem value="angular-standalone">

```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();
}
});
Expand Down Expand Up @@ -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.
Expand Down
24 changes: 12 additions & 12 deletions versioned_docs/version-v8/developing/hardware-back-button.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -314,18 +314,17 @@ document.addEventListener('ionBackButton', (event: BackButtonEvent) => {
<TabItem value="angular">

```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();
}
});
Expand All @@ -336,18 +335,17 @@ constructor(
<TabItem value="angular-standalone">

```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();
}
});
Expand Down Expand Up @@ -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.
Expand Down
Loading