CODEWITHSUNDEEP
angularionic-framework
Jaime Cuellar
Jaime Cuellar

Reputation: 474

ionic back button not showing

I am creating app with Ionic, and i am trying to create a navigator and push page. This is my code.

list.html 

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

 <ion-content>
   <ion-card *ngFor="let pais of paises | async"                                            
(click)="cambiarPagina()">
  <ion-item>
  <ion-avatar item-start>
    <img src="{{pais.bandera}}">
  </ion-avatar>
  <h2>{{pais.nombre}}</h2>
  <p>Su nivel en el ranking de la FIFA es: {{pais.ranking}}</p>
  </ion-item>
 </ion-card>
 </ion-content>

this is my list.ts 

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';
import { AngularFireList } from 'angularfire2/database';
import { AboutPage } from '../about/about';

@Component({
  selector: 'page-list',
  templateUrl: 'list.html'
})
export class ListPage {
  pais: AngularFireList<any>
  paises: Observable<any[]>


constructor(public navCtrl: NavController, public navParams: 
 NavParams, public db: AngularFireDatabase) {
 // If we navigated to this page, we will have an item available as a 
 nav param
  this.paises = db.list('paises').valueChanges();
 }

 cambiarPagina(){
   this.navCtrl.push(AboutPage);
 }
}

and this is my about.html 

<ion-content padding class="about">
   This is my super awesome about page.
</ion-content>

and this is example of what I am getting

enter image description here Anybody can help me what i am doing wrong?

Upvotes: 2

Views: 1805

Answers (1)

Haifeng Zhang
Haifeng Zhang

Reputation: 31875

You don't have <ion-navbar></ion-navbar> in your about.html and back button belongs to it, try to add it into your about.html

Upvotes: 2

Related Questions