Ionic Angular Back Button - How to customize the hardware back button in Ionic Angular

In this Ionic Back Button tutorial, we are going to look at how to run custom code when the back button is clicked in an Ionic Angular Android app. We will implement code to get the back button working, to close our app using the back button, and finally how to place the software back button in the toolbar using the ion-back-button component.

CONTENTS

00:00 - Intro
00:56 - what we want to build
02:02 - Create a new Ionic App
04:33 - Project File Structure & Test Run in Android Emulator
06:50 - Default app running in Android Emulator
08:09 - Generate a second page
09:53 - Customizing the hardware back button - code & detailed explanation
15:27 - DEMO - Custom back button code in action
16:29 - Customizing the hardware back button - code to exit the app

Social Media Links
-------------------------------

[prasadnarayana]

Thank you Soo much for the video
My app is ready for production build I needed ASP

[carolruo]

Thank you.
I have a question. When you have an app which you wanna put a section let's say 'related products' to some product component and the user can navigate infinitely between the products, is this the right implementation to do? using the Location to make the back button navigation will it save the user's pages history?

[crislaurencelorejas]

This video is very informative. Thank you for sharing your knowledge. More power !

[agrotutor]

Thanks for the great Tutorial indeed saved several hours😀

[pathumjayasuriya]

Great tuttorial but i'm stuck on Cannot read property 'canGoBack' of undefined on app component any help ?

[barikchandan]

Sir Thanks for this informative video it's helped me out after doing lot's of research but...
one question when a page doesn't have any previous page it simply shows for the close app that's fine. But otherwise, all the time back button functionality is emitted for every single page so if I have to emit this functionality only for 2 or 3 pages then how can I do that ?
Please show some concern.

[lLucassFerreira]

hello, I have an app, with tabs bar, containing: home, search, profile and signatures, but when I click on return from any of the tabs, it returns to the home as expected, but the tab is selected even though it is in the home, you would know what it would be ?

[tatendamatavire]

Great to see you're still putting out tutorials. I had sent you a query on Whatsapp, did you see it?

[The]

Hi thanks for this video, back button is working for all pages expect if try to navigate back to tabs/tab1 from tabs/tab2 it is taking out of app page itself can please just a way to address this issue.

[oscarmendez]

Hi, i'm getting the error: this-routerOutlet-canGoBack() is undefined, one post mentioned that the method can not be used in the app.component, but you used it there, any thoughts? Thank you

[chidochemoyochisweto]

Thank you so much. This was really helpful!

[muhammadarief]

May I know Angular version are used in this video?

[anroswell]

Este es un gran tutorial, poco encontrado en la web, justo buscaba esto, muchas gracias.

[nikeshbhagat]

Do u have the same back button solution for nativescript angular

[robmooreproductions]

I get the white screen but have a different error
Uncaught ReferenceError: IonicNativePlugin is not defined

[ahmedrahmed]

please help! ... I've coded the same as you did but I have this error " Cannot read property 'canGoBack' of undefined "

[nadaalchami]

can i try it on cordova instead of capacitor ?

[nikeshbhagat]

Hi anybody knows how to get back button event on iOS platform using nativescript angular

[mdaslamknl]

Excellent

Can you share the code

Thanks

[giannyjohnbetancourt]

Muchas gracias por el contenido del video bro