How to return to the previous screen of ionic 2
In ionic q we will use $ionichistory.goback()
to return to the previous screen. But in ionic 2 we can achieve this. And I tried this button on click to print the console message. But it doesn't work.
<ion-buttons left class="loginnavbtn" (click)="goback()">
CANCEL
</ion-buttons>
.js
goback() {
console.log('Click on button Test Console Log');
}
Please help me. I have two screens. when I go from the first screen to the next screen. on the next screen, I have one button called back. When I click that I should go back to the first screen. how to do it?
My complete 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;
}
}
source to share
Check the NavController API in the docs.
To go to the previous page, enter a constructor in the constructor and call pop()
.
constructor(private navCtrl:NavController){}
goback() {
this.navCtrl.pop();
console.log('Click on button Test Console Log');
}
Also check the syntax of button .
<ion-buttons >
<button ion-button left class="loginnavbtn" (click)="goback()">
Cancel
</button>
<!-- left aligned content here -->
</ion-buttons>
source to share
Navigation in Ionic works like this:
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>
source to share