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;
}
}
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>
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>
import { Location } from "@angular/common";
constructor(private location: Location) { }
goBack(){
this.location.back();
}