How to go back in Ionic 4

Question

I want to add a back button in Ionic4(Angular 7). But I can't find the proper method in Angular Router.

import {Router} from '@angular/router';

How do we go back when clicking a button, in the component handler? I'd like to implement it using '@angular/router' not '@angular/common' => Location

stackoverflow.com/questions/35446955/how-to-go-back-last-page — nircraft
– nircraft, Commented Apr 10, 2019 at 14:46
Possible duplicate of Angular 5 - Which should I use to navigate backward - href or location.back()? — nircraft
– nircraft, Commented Apr 10, 2019 at 14:46
I want to go back without using Location, just with @angular/router. — Valeri
– Valeri, Commented Apr 10, 2019 at 14:48

Peter Haddad · Accepted Answer · 2019-04-10 21:17:42Z

7

Since you are using ionic 4 then to go backward, you can do the following:

constructor(private navCtrl: NavController) {} btnClick(){ this.navCtrl.navigateBack('/home'); }

answered Apr 10, 2019 at 21:17

Peter Haddad

81.2k26 gold badges148 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Fabian N. Over a year ago

Wouldn't it be more appropriate to use location.back() from @angular/common when OP is using angular routing? (see angular.io/api/common/Location)

Peter Haddad Over a year ago

It is being called when u usenavigateBack(), ionic uses it in there code

Fabian N. Over a year ago

I just realized that when you use location.back() directly you don't get a proper back animation.

Andrew Pomorski · Accepted Answer · 2019-04-24 07:03:18Z

With Angular routing you could use the Location API:

constructor(private location: Location){}

and then when you need to navigate back call:

this.location.back();

Keep in mind that for Angular 7 you have to import Location from @angular/common

KevinTenyRoy · Accepted Answer · 2020-10-14 12:29:20Z

Just do the following if you wanna go back to your previous route.

constructor(private navCtrl: NavController) {} goBack(){ this.navCtrl.pop(); }

This'll pop the current page from the navigation stack and return you to the previous page and the part of the page from where you had navigated forward.

Collectives™ on Stack Overflow

How to go back in Ionic 4

3 Answers 3

3 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Linked

Related