Ionic 2 – Reloading data when Ionic’s back button is pressed

Ensuring previous route data is refreshed when Ionic's back button is pressed

Posted on March 23, 2018

Ionic’s back button loads cached data rather than reloading the previous route. This can cause issues when the previous route data needs to change depending on actions that have been performed in the current route.

The only way I’ve found to force a refresh is to create a custom back button method, get the previous component and then set this as the root.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Navbar } from 'ionic-angular';
import { ViewChild } from '@angular/core';

@Component( {
    selector: 'my-component',
} )

export class MyComponent {

    @ViewChild( Navbar ) navBar: Navbar;

    constructor( private _navController: NavController ) {
    }

    ionViewDidLoad() {

        this.navBar.backButtonClick = () => {
            // Anything in here will fire when the back button is clicked
            // this._navController.getPrevious().component gets the previous component from the nav stack
            this._navController.setRoot( this._navController.getPrevious().component )
        }
    }

}