How to handle the Nav bar back button in ionic 3? 

Share the post
Today, We will see How to handle the nav bar back button in ionic 3?. In Ionic you aware of the navigation bar which shows the top of the page. This navigation bar can contain a button that helps the user to come back to the previous page. Ionic defaults provide its functionality & it works well when you don’t want to do some task when the user comes back on the parent page. But what happens when you want to handle the navbar back button to pass data from child page to parent page? I also show you how to get that
data to parent class from the child class.So let’s start it.

In child class, Import ViewChild & Navbar classes just shown as below :

 

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

  

after that In child class you have to initialize navBar :

 

@ViewChild(Navbar) navBar: Navbar;

  

After that you have to handle the back button inside your ionViewDidLoad() method :

 

ionViewDidLoad() {
this.navBar.backButtonClick = (event:UIEvent)=>{
this.navCtrl.push('HomePage',{'isFromChildPage' : true});
	}
}
  

then the last step is to handle our boolean data to parent page HomePage as follows :

 

ionViewDidEnter() {
let data = this.navParams.get('isFromChildPage');
console.log(data);
    }

  

Leave a Comment