ionic-framework: inside Modal not working

Since the beta 7 the <ion-navbar> is no longer working inside a modal page. I have to changed it to <ion-toolbar> to make it running. Don’t know if it is a bug or just a change.

Step to reproduce:

  1. Add new page component (call it for example modal.ts):
import {Page} from 'ionic-angular';

@Page({
  templateUrl: 'build/modal/modal.html',
})
export class ModalSample {
  constructor() {
  }
}
  1. Add the related template file (modal.html):
<ion-navbar *navbar primary>
    <ion-title>Title</ion-title>
</ion-navbar>

<ion-content>
    Test
</ion-content>
  1. Open the modal, for example like:
import {Page, NavController, Modal} from 'ionic-angular';
import {ModalSample} from './../../modal/modal';


@Page({
  templateUrl: 'build/pages/page1/page1.html',
})
export class Page1 {
  constructor(private nav: NavController) {
    this.openModal();
  }

  private openModal() {
    let modal = Modal.create(ModalSample);
    this.nav.present(modal);
  }
}

Result is, that the <ion.navbar> is not showing. Try editing the modal.html to <ion-toolbar> and it’s working:

<ion-toolbar primary>
    <ion-title>Title</ion-title>
</ion-toolbar>

<ion-content>
    Test
</ion-content>

Is this a new bug in the beta or a change?

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 22 (13 by maintainers)

Commits related to this issue

Most upvoted comments

Hi @Inoverse and others,

This should be fixed in nightly. Please let me know if you have any issues and I’ll re-open. Thanks for contributing to Ionic!

Thanks, Dan