In Ionic 2 for Android, I encountered an issue with the title placement. To resolve this, I applied some CSS to center the title and added left and right buttons to the nav bar. However, when I tried to implement onclick functionality for these buttons, nothing happened - no console messages were displayed either.
Below is a snippet of my code:
HTML :
<ion-header>
<ion-toolbar>
<ion-buttons class="loginnavbtn" (click)="goback()" left>
CANCEL
</ion-buttons>
<ion-title>
LOGIN
</ion-title>
<ion-buttons class="loginnavbtn" (click)="loginbtntap()" right>
SAVE
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
CSS :
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;
}
}
JavaScript :
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-login',
templateUrl: 'login.html'
})
export class LoginPage {
constructor(public navCtrl:NavController) {}
public goback() {
this.navCtrl.pop();
}
public loginbtntap() {
this.navCtrl.pop();
}
}
I'm having issues with the onclick functionality not working as expected. Any insights on what might be going wrong?
Thank you!