how to go back to previous screen ionic 2

Question

In ionic q we will use $ionichistory.goback()to go back the previous screen. But in ionic 2 how can we achive that. And i tried this button on click to print the console message . But its not working.

<ion-buttons left class="loginnavbtn" (click)="goback()">
  CANCEL
</ion-buttons>

.js

goback() {
   console.log('Click on button Test Console Log');
}

Please help me out. i have two screen . when i go from first screen to next screen. in next screen i have one button called back. When i press that i should be back to first screen. how to so that ?

My full code :

html:

<ion-header>
  <!-- use ion-toolbar for a normal toolbar and ion-navbar for navigation -->
  <ion-toolbar>
    <ion-buttons left class="loginnavbtn" (click)="goback()">

    CANCEL
    <!-- left aligned content here -->
    </ion-buttons>

    <ion-title>
      LOGIN
    </ion-title>

    <ion-buttons right class="loginnavbtn" (click)="loginbtntap()">
    SAVE
      <!-- left aligned content here -->
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content>


   </ion-content>

my .js :

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



@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})

export class LoginPage {


 goback() {
    this.navCtrl.pop();
}
loginbtntap() {
    this.navCtrl.pop();
}

  constructor(private navCtrl:NavController) {



  }

}

my .scss:

page-login {
ion-header {
  .button-md {
    box-shadow: none;
  }

  .toolbar-title {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 500;
  }
}

.loginnavbtn {

  color: #116096 !important;
   font-size: 14px;
    font-weight: 400;
}
}

To come this page which method you use this.navCtrl.push(somepage) or this.navCtrl.setRoot(somepage) ? — Math10, Apr 29 '17 at 16:12

Suraj Rao · Answer 1 · 2017-04-29T07:32:02.967

15

Check NavController API in the docs.

To go to previous page,inject navcontroller in the constructor and call pop().

constructor(private navCtrl:NavController){}

goback() {
   this.navCtrl.pop();
   console.log('Click on button Test Console Log');
}

Also check syntax for button.

<ion-buttons >
    <button ion-button left class="loginnavbtn" (click)="goback()">
      Cancel
    </button>
    <!-- left aligned content here -->
    </ion-buttons>

edited Apr 29 '17 at 07:32

answered Apr 29 '17 at 07:25

Suraj Rao

29,388
11
94
103

_not working_ meaning? are you getting errors? any logs in console? – Suraj Rao Apr 29 '17 at 07:28
no log messages too. i put my full code in my post.i dont know what i am missing – hybrid Dev Apr 29 '17 at 07:29
i check the problems is in my custom scss code. i wrote that scss code to make the title as centre . but now that making problem. – hybrid Dev Apr 29 '17 at 07:32
https://stackoverflow.com/questions/43716187/ionic-2-back-button-or-any-icon-is-not-showing-only-small-box-icon-is-showing – hybrid Dev May 01 '17 at 09:57
3

You can also just add `navPop` in the button element like this ` – prolificslacker May 15 '17 at 19:59
I would recommend `navPush()` to `navPop()`. Assume we have 3 pages, A, B,C and C can only be called by B(imagine C is a receipt page). so if I go back to B and do navPop it will go back to the receipt page(C) whereas I would want it to go back to A. – Oush Dec 07 '18 at 10:39

score 6 · Answer 2 · answered Nov 20 '17 at 05:16

The navigation in Ionic works like:

1. PUSH Page:

pageone.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { PageTwo }from '../pagetwo/pagetwo';

@Component({
  templateUrl: 'pageone.html'
})
export class PageOne {
  constructor(public navCtrl: NavController) {}

  push() {
    this.navCtrl.push(PageTwo);
  }
}

pageone.html

<ion-header>
  <ion-navbar>
    <ion-title>Navigation</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <button ion-button block (click)="push()">Push New Page</button>
</ion-content>

2.POP Page:

pagetwo.ts

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

@Component({
  templateUrl: 'pagetwo.html'
})
export class PageTwo {

  constructor(public navCtrl: NavController) {}

  pop() {
    this.navCtrl.pop();
  }
}

pagetwo.html

<ion-header>
  <ion-navbar>
    <ion-title>Page 2</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <button ion-button color="secondary" block (click)="pop()">Pop This         
Page</button>
</ion-content>

score 0 · Answer 3 · answered Aug 11 '21 at 15:59

0

import { Location } from "@angular/common";

constructor(private location: Location) { }

goBack(){
  this.location.back();
}

answered Aug 11 '21 at 15:59

Nibin Benjamin

240
2
6

how to go back to previous screen ionic 2

3 Answers3