click event in ion-navbar not working in modal (Beta 11)

[dgroh]

Short description of the problem:

As per requirement, we need a ion-navbar in our modal, but a click event in the ion-navbar does not work, the click event is not even shown in the DOM. Using ion-toolbar would fix the click event issue, but would also lead to a layout issue. We use ion-modal with ion-tabs. The ion-tab has a gradient background following the ion-navbar background, which is not possible with ion-toolbar.

What behavior are you expecting?

I'm expecting to be able to use ion-navbar in a modal with a close button to dismiss the modal

Steps to reproduce:

1. Create a modal with ion-tabs
2. Add ion-navbar to the tab pages
3. Add a close button with click event inside the navbar

Which Ionic Version? 2.0 Beta 11

Run ionic info from terminal/cmd prompt: (paste output below)

Cordova CLI: 6.3.1
Gulp version: CLI version 3.9.1
Ionic CLI Version: 2.1.0-beta.3
Ionic App Lib Version: 2.1.0-beta.1
Node Version: v4.6.0

[jgw96]

Hello, thanks for using Ionic! If you remove ion-tabs from your modal does the click event in ion-navbar work?

[dgroh]

Hi @jgw96 , unfortunately not. I just tried. Here is the code to open the modal:

public openMyPins() {
    let myPins = this.modalController.create(SubjectPinsComponent, { target: "e0000002" });
    myPins.present();
} 

Here is the modal:

<ion-navbar>
    <ion-buttons end>
        <button ion-button (click)="close()">
            <ion-icon ios="md-close" md="md-close"></ion-icon>
        </button>
    </ion-buttons>
    <ion-title text-center>
        <svg width="54px" height="72px" viewBox="0 0 18 36">
            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g transform="translate(-672.000000, -2530.000000)" fill="#FFF">
                    <g transform="translate(0.000000, 2349.000000)">
                        <g transform="translate(672.000000, 181.000000)">
                            <path d="M7,25 L10,25 L10,32.8571429 L7,36 L7,25 L7,25 Z M12.8565,7.33333333 C12.8565,3.0756 16.3965,2.8028 16.5,0 L1.5,0 C1.602,2.8028 5.1435,3.0756 5.1435,7.33333333 C5.1435,12.8641333 0,12.1601333 0,22 L18,22 C18,12.1601333 12.8565,12.8641333 12.8565,7.33333333 L12.8565,7.33333333 Z"></path>
                        </g>
                    </g>
                </g>
            </g>
        </svg>
        <br />
        Meine Pins
    </ion-title>
</ion-navbar>
<ion-content [ngClass]="subject">
</ion-content>

And here is the image how it looks (without the tabs):

Here how it should look with the tabs (tabs have the same background as navbar):

[dgroh]

Update: I tried with ion-toolbar again and the close button is also not clickable. I'll create a repo with the example. I would really appreciate if this could be analysed. This is a very important issue and I wonder why this did not happen to anyone else. Hopefully I'm just missing a thing?

[dgroh]

Here is the repo: https://github.com/dgroh/Issue8776

[dgroh]

@jgw96 I fixed the issue. I put the ion-toolbar where the tab is and I kept the ion-navbar where the content is. I was missing the concept of the usage of tabbar.