ionic-team / ionic-team/ionic-docs

content: Example shows uncommon IonRouterOutlet usage

Open
#3,583 0 comments 0 reactions 0 assignees View on GitHub
content package: angular
Dominant language
MDX
Stars
621
Forks
3.2k
Avg merge
1d 2h
Merged PRs (30d)
86

Description

### URL

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

### Issue Description

On the linked page (I am referencing the `Angular (Standalone)` tab), the `IonRouterOutlet` is injected via the constructor.
However, this only works if it used in a subcomponent of the app and not in `AppComponent` and, I would argue that this is a rather uncommon use-case, as the usual developer probably only wants to add it to the top-most component.

In my case, I had to search for quite some time to find a really neat solution in the following issue comment, and according to the reactions I am not alone (note that the issue is also locked since nearly 4 years!):
https://github.com/ionic-team/ionic-framework/issues/21630#issuecomment-683007162

IMO, the docs example should show a working way of implementing the default behavior (like in native Android apps) in a straightforward way like:
```ts
import { ViewChild } from '@angular/core';
import { IonRouterOutlet, Platform } from '@ionic/angular/standalone';
import { App } from "@capacitor/app";

// ...

@ViewChild(IonRouterOutlet, {static: true}) routerOutlet?: IonRouterOutlet

constructor(private platform: Platform) {
this.platform.backButton.subscribeWithPriority(-1, () => {
if (this.routerOutlet && !this.routerOutlet.canGoBack()) {
App.exitApp();
}
});
}
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.