IONIC 2 back button is locked at ion-navbar

Question

I got some problem with ionic 2 navigation.I got two pages, transaction and transaction result.

here is my transaction page and ts file.

<ion-header>
  <ion-navbar>
       <button ion-button menuToggle start>
            <ion-icon name="menu"></ion-icon>
          </button>

    <ion-title>Transaction</ion-title>
    <ion-buttons end>
      <button ion-button icon-only color="secondary">
        <ion-icon name="add"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-card>
    <ion-list>
      <ion-list-header>
         Search Transaction
      </ion-list-header>

        <ion-item>
                <ion-label stacked>Client Name</ion-label>
                <ion-input [(ngModel)]="ClientName" type="text"></ion-input>
        </ion-item>
        <ion-item>
                <ion-label stacked>Transaction No</ion-label>
                <ion-input [(ngModel)]="TransactionNo" type="text"></ion-input>
        </ion-item>
        <ion-item>
                <ion-label stacked>Status</ion-label>
                <ion-select [(ngModel)]="StatusTr">
                  <ion-option value="{{st}}" *ngFor="let st of StatusArray">{{st}}</ion-option>                 
                </ion-select>
        </ion-item>
        <ion-item>
                <ion-label stacked>Invoice</ion-label>
                <ion-select [(ngModel)]="Invoice">
                  <ion-option value="{{Inv}}" *ngFor="let Inv of InvoiceArray">{{Inv}}</ion-option>                 
                </ion-select>
        </ion-item>
        <ion-item>
            <div item-content item-left>
               <div item-content item-left>Transaction Date</div>
                <ion-label stacked>From Date</ion-label>
                <ion-datetime displayFormat="DD/MMM/YYYY"  min="2013" max="2020-12-31"[(ngModel)]="transferDate"></ion-datetime>
            </div> 
        </ion-item>
        <ion-item>
            <div item-content item-left>
               <ion-label stacked>To Date</ion-label>
                <ion-datetime displayFormat="DD/MMM/YYYY"  min="2013" max="2020-12-31"[(ngModel)]="transferDateTo"></ion-datetime>
            </div>
        </ion-item>
        <ion-item>
            <button ion-button block color="royal" (click)="searchTrans()" >
              Search
            </button>
        </ion-item>
    </ion-list>
  </ion-card>
</ion-content>

the following is the typescript function that navigates to another page called transaction result, called searchTrans().

import { Component } from '@angular/core';
import { NavController,MenuController } from 'ionic-angular';
import {ShareService} from '../../share/ShareService';
import {transCrit} from '../../viewmodel/transCrit';
import {TransResult} from '../trans-result/trans-result';

@Component({
  selector: 'page-transaction',
  templateUrl: 'transaction.html'
})
export class Transaction {

  ClientName:string;
  TransactionNo:string;
  StatusTr:string;
  Invoice:string;
  transferDate:string;
  transferDateTo:string;

  StatusArray:string[];
  InvoiceArray:string[];
  passerVM:transCrit;

  constructor(public navCtrl: NavController,public menu:MenuController,private shareServe:ShareService) {
     this.menu.swipeEnable(true);

     this.StatusArray = ["Successful","Submit","Reject","Draft","Delete","Archive"];
     this.InvoiceArray =["All","Invoice Issued","Not Invoice"];

     this.ClientName = "";
     this.TransactionNo = "";
     this.StatusTr = "";
     this.Invoice = "";
     this.transferDate = this.todayDate(this.transferDate);
     this.transferDateTo = this.todayDate(this.transferDateTo);    

  }

  ionViewDidLoad() {
    console.log('Hello Transaction Page');
  }

  todayDate(datetoDay :string) {
      let utc = new Date().toJSON().slice(0,10);
      if (datetoDay === undefined ){
        return utc;
      }
  }

  searchTrans(){
      this.passerVM = new transCrit(this.ClientName,this.Invoice,this.StatusTr,this.TransactionNo,this.transferDate,this.transferDateTo);

      this.navCtrl.push(TransResult, {mdlPasser : this.passerVM});
  }

}

Here is my transaction result page

<ion-header>
  <ion-navbar>

    <ion-title>trans-result</ion-title>

  </ion-navbar>
</ion-header>

<ion-content padding>

</ion-content>

Here is the typescript file for transaction result page

import { Component } from '@angular/core';
import { NavController, NavParams, ViewController,MenuController } from 'ionic-angular';

@Component({
  selector: 'page-trans-result',
  templateUrl: 'trans-result.html'
})
export class TransResult {

  constructor(public navCtrl: NavController,private navParams: NavParams, private viewCtrl:ViewController, private menu:MenuController) {
      this.menu.swipeEnable(false);
  }

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

  ionViewDidLoad() {
     console.log(this.navCtrl.canGoBack());
     console.log(this.navParams.get('mdlPasser'));
  }

}

My Problem is that I can see back button in transaction result page. It is automatically added by ionic 2 framework. but this button is locked and totally cannot click. Is there anyway to do the back button alive.

Best Rgds, frog

Answer 1

Add hideBackButton="true"

<ion-header hideBackButton="true">
    <ion-navbar>
        <ion-title>trans-result</ion-title>
    </ion-navbar>
</ion-header>

Answer 2

Debugged it, in your home.scss and trans-result.scss have set (both globally defined instead of page scope btw)

ion-title{
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 90px 1px;
  width: 100%;
  height: 100%;
  text-align: center;
}

This makes the ion-title 'lay over' the back button. This way when you click it, you click the title and not the back button.

Reducing your styles to:

ion-title{
  margin-left: -12%;
  text-align: center;
}

Kept the title looking the exact same and the back button worked.