# Ionic 4 Event to Trigger Navigation Back to page

**URL:** <https://forum.ionicframework.com/t/ionic-4-event-to-trigger-navigation-back-to-page/141676>\
**Category:** Ionic Framework\
**Created:** [September 13, 2018, 8:23pm UTC](https://forum.ionicframework.com/t/ionic-4-event-to-trigger-navigation-back-to-page/141676 "2018-09-13T20:23:43Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![JoeOSMG](https://avatars.discourse-cdn.com/v4/letter/j/848f3c/32.png) [@JoeOSMG](https://forum.ionicframework.com/u/JoeOSMG)\
**Post date:** [September 13, 2018, 8:23pm UTC](https://forum.ionicframework.com/t/ionic-4-event-to-trigger-navigation-back-to-page/141676/1 "2018-09-13T20:23:43Z")

</div>

In Ionic 3 we used the `ionViewWillEnter` lifecycle event to reload data when navigating back to a page.

`ionViewDidLoad` gets called only when the page component is loaded, but `ionViewWillEnter` is called whenever the page is navigated to; regardless of whether it’s a `navPop` or `nav.push`.

However, Ionic 4 uses Angular routing, which doesn’t seem to have a lifecycle hook for when a component is navigated `back` to. How can we detect when a page component is navigated back to?

---

<div class="post-metadata">

**Author:** ![joostvd](https://avatars.discourse-cdn.com/v4/letter/j/76d3ee/32.png) [@joostvd](https://forum.ionicframework.com/u/joostvd)\
**Post date:** [September 13, 2018, 9:05pm UTC](https://forum.ionicframework.com/t/ionic-4-event-to-trigger-navigation-back-to-page/141676/2 "2018-09-13T21:05:46Z")

</div>

Would this method work for you?

> <https://github.com/ionic-team/ionic/issues/15260#issuecomment-420595107>

---

<div class="post-metadata">

**Author:** ![JoeOSMG](https://avatars.discourse-cdn.com/v4/letter/j/848f3c/32.png) [@JoeOSMG](https://forum.ionicframework.com/u/JoeOSMG)\
**Post date:** [September 14, 2018, 2:48pm UTC](https://forum.ionicframework.com/t/ionic-4-event-to-trigger-navigation-back-to-page/141676/3 "2018-09-14T14:48:47Z")

</div>

Thanks for sending this! Unfortunately this solution was not ideal because it triggered for each instance of the active page.

---

<div class="post-metadata">

**Author:** ![JoeOSMG](https://avatars.discourse-cdn.com/v4/letter/j/848f3c/32.png) [@JoeOSMG](https://forum.ionicframework.com/u/JoeOSMG)\
**Post date:** [September 14, 2018, 2:56pm UTC](https://forum.ionicframework.com/t/ionic-4-event-to-trigger-navigation-back-to-page/141676/4 "2018-09-14T14:56:43Z")

</div>

[We created a solution using this StackOverflow post](https://stackoverflow.com/questions/45431682/get-instance-of-component-on-active-route-in-angular2s-router)

We added a `willEnter()` function to our `<appName>Page` interface. Each page in the app `implements` the `<appName>Page` interface. In the `app.component.ts` we listen for `activate` events and call the `activatedPage.willEnter()` function.

AppPage Interface:

```auto
export interface ExampleAppPage {
    exampleAppWillEnter: () => void;
}

```

`ion-router-outlet` in `app.component.html`:

```auto
<ion-router-outlet main (activate)="!!$event.exampleAppWillEnter ? $event.exampleAppWillEnter() : undefined"></ion-router-outlet>

```

Ionic Page Implementation:

```auto
export class ExamplePage implements ExampleAppPage {

    exampleAppWillEnter() {
        // Gets called whenever navigated
    }

}

```

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:17pm UTC](https://forum.ionicframework.com/t/ionic-4-event-to-trigger-navigation-back-to-page/141676/5 "2021-07-19T21:17:27Z")

</div>

Closed on July 19, 2021, 9:17pm UTC