How to handle the Navbar back button in ionic 3? 

Share the post

Today, We will see How to handle the navbar back button in ionic 3?. In Ionic, you are 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 the child page to the parent page? I also show you how to get that data to the 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');


Leave a Comment