Back button not working on this.navCtrl.push

Ionic Framework ionic-v3
1

Hello,

I was watching an ionic crash course video: https://www.youtube.com/watch?v=O2WiI9QrS5s&feature=youtu.be and I made exactly like the tutorial:

  1. Created a new page using ionic g page noticia-completa
  2. Added this new page to @NgModule under: “declarations” and “entryComponents”.
  3. Created a card list:
    <ion-card *ngFor="let feed of feeds">
      <img (click)="itemSelected(feed)" [src]="feed.img" />
      <ion-card-content (click)="itemSelected(feed.url)">
        <ion-card-title>
          {{feed.post_title}}
        </ion-card-title>
        <p [innerHTML]="feed.post_excerpt" id="justify"></p><br/>
        <span [innerHTML]="feed.post_date" class="data_e_hora"></span> - <span>{{feed.autor}}</span>
      </ion-card-content>
    </ion-card>

My .ts for clicking on the card is:

    itemSelected (feed) {
      this.navCtrl.push (NoticiaCompletaPage, {
        feed: feed
      });
    }

This is my noticias-completa .html:

    <ion-header>
      <ion-navbar>
        <ion-title>teste</ion-title>
      </ion-navbar>
    </ion-header>
    <ion-content>
      <div class="item-detail" padding>
        <h2>teste</h2>
        <p>teste</p>
      </div>
    </ion-content>

and for my .ts page:

import { Component } from '@angular/core';
    import { NavController, NavParams } from 'ionic-angular';
    
    @Component({
      selector: 'page-noticia-completa',
      templateUrl: 'noticia-completa.html',
    })
    export class NoticiaCompletaPage {
    
      feed: any;
      constructor(public navCtrl: NavController, public navParams: NavParams) {
        this.feed = navParams.get ('feed');
      }
    
      ionViewDidLoad() {
        console.log('ionViewDidLoad NoticiaCompletaPage');
      }
    }

The only thing I’m doing differently is that I’m using a side menu template instead of tabs. Whenever I open this new page, there is a back button on the navbar but it’s not working. If I use the Android back button I’m able to go back to the main page but the button that is created doesn’t.

EDIT: Is working only in iOS; This is causing I’m only being able to read one of the feed because whenever I go back and click on another card I get an error.

How can I fix it?

Thank you!

2

Try this and let me know what you got.


    import { Component,ViewChild } from '@angular/core'; // import viewChild here
    import { NavController, NavParams } from 'ionic-angular';
    
    @Component({
      selector: 'page-noticia-completa',
      templateUrl: 'noticia-completa.html',
    })
    export class NoticiaCompletaPage {
      @ViewChild (Navbar) navBar : Navbar; // add this line
      feed: any;
      constructor(public navCtrl: NavController, public navParams: NavParams) {
        this.feed = navParams.get ('feed');
      }
    
      ionViewDidLoad() {
        console.log('ionViewDidLoad NoticiaCompletaPage');
        this.navBar.backButtonClick = (e:UIEvent) => {   /// add this event
             this.nav.pop();
        };
      }
    }
3

Hey, I’m getting “Cannot find name ‘Navbar’” when trying to add:

@ViewChild (Navbar) navBar : Navbar;

4

import Navbar from ionic-angular.

import { NavController, NavParams,Navbar } from 'ionic-angular';

5

Still getting the error: http://i.imgur.com/Mo9sxI5.png

The button is there but nothing happens when I click except on iOS. iOS was working and it’s still working.

6

Can you check in console if it’s generating any error?

7

Hey there, just checked. Not the only log I get is: ionViewDidLoad NoticiaPage

8

Have you found the solution cause I am facing the same issue

9

Have you changed the CSS of your ion title ? Cause I have done the same which caused this issue.
Thanks

2 Likes
10

this is happening to me cause i centered the ion-title in scss

11

Thanks, I noticed that. How do we centre the title without messing with the back button?

12

Hi, i just add custom back button.

<ion-buttons>
    <button ion-button icon-only (click)="back()">
       <ion-icon name="arrow-back"></ion-icon>
   </button>
 </ion-buttons>

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

13

<ion-title center text-center style="padding:--px;">Title</title>

try this

14

If you changes the css for the ion-title, you just need to add “z-index = -1” in the ion-title, That’s all.