Modal not working with tabs because of nav[_tabs] if statement


#1

I’m trying simply to make a modal show up on my page, but when I click the card that would bring up the modal nothing happens. So, I put a break point on the navController.present function I saw this code:

             // TODO: must have until this goes in
             // https://github.com/angular/angular/issues/5481
             void 0;
             return;
         }

I saw when I went to that issue link that the issue had been resolved with new releases but I’ve updated to beta.10

"dependencies": {
    "@angular/common": "2.0.0-rc.3",
    "@angular/compiler": "2.0.0-rc.3",
    "@angular/core": "2.0.0-rc.3",
    "@angular/platform-browser": "2.0.0-rc.3",
    "@angular/platform-browser-dynamic": "2.0.0-rc.3",
    "@angular/http": "2.0.0-rc.3",
    "es6-shim": "^0.35.0",
    "ionic-angular": "2.0.0-beta.10",
    "ionic-native": "1.2.4",
    "ionicons": "3.0.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12"
  },
  "devDependencies": {
    "del": "2.2.0",
    "gulp": "3.9.1",
    "gulp-watch": "4.3.5",
    "ionic-gulp-browserify-typescript": "2.0.0",
    "ionic-gulp-fonts-copy": "^1.0.0",
    "ionic-gulp-html-copy": "^1.0.0",
    "ionic-gulp-sass-build": "^1.0.0",
    "ionic-gulp-scripts-copy": "^2.0.0",
    "run-sequence": "1.1.5"
  },

but when I navigate in my own project to the nav component in the ionic-angular node module, I still see the code above.

So the question is two fold. Am I using the modal correctly with tabs?(the modal code is identical to that on the docs page)? or Am I making an error when I update my project?

TIA, i’ve been banging my head with this one for almost a week now.

Update

Here is where I how I have the tabs in my app.html:

<ion-tabs greenTheme [selectedIndex]="index">
    <ion-tab tabIcon="people" #content tabTitle="My Roster" [root]="tab2"></ion-tab>
    <ion-tab tabIcon="stats" #content tabTitle="Wage Overview" [root]="tab1"></ion-tab>
</ion-tabs>

Obviously index is a variable in my app.ts. It starts as 1 if that matters. I assign the variables “tab1” and “tab2” to different pages ( now components ) in the constructor in my app.ts file.

In one of the pages is where I want to modal to show. It will show upon tapping a card in order to get more in depth information about the card. Here is the code for that:

html-

    <ion-card (click)='presentModal()' class='custom-card'>
        <ion-card-header>
            Sched. Accuracy
        </ion-card-header>
        <ion-card-content>
            71%
        </ion-card-content>
    </ion-card>

and the .ts file-

    presentModal() {
        let myModal = Modal.create(AccModal, {param: "something"});
        console.log('myModal is ', myModal);
        this.nav.present(myModal);
        console.log("function being called");
    }

The actual modal class code is here:

@Component ({
    template: `
        <ion-card class='popover'>
            <ion-card-header>
                Sched Accuracy {{accNumber}}%: {{globalService.currentTitle}} Breakdown
            </ion-card-header>
            <ion-card-content>
                <ion-list inset>
                    <ion-item *ngFor="let d of accCardData">
                        <span class='pop-data'>{{d.title}}</span><span class='pop-data right'>{{d.percentage}}%</span>
                    </ion-item>
                </ion-list>
            </ion-card-content>
        </ion-card>
    `
})

export class AccModal {

    accCardData: any [];
    accNumber: number
    constructor(public params: NavParams, public http:Http) {
        console.log("params is ", params.get('param'));
        this.accNumber = 71;

    }

   getAccdata (){
        this.http.get('data/accData.json')
            .map(res => res.json())
            .subscribe(
                data => this.accCardData = data,
                err => console.log(err)
            );
    }
}

Hopefully this sheds some light on what’s going on


#2

Hmm I just started a tabs project and I’m not able to recreate this.
Could you share some code?


#3

Just added it to the original question


#4

The root of the issue may be in the updating to beta.10. I saw in the docs that I should no longer be doing navController.present, but to do it with the ModalController. However, when I run:

npm install --save ionic-angular@2.0.0-beta.10 @angular/common@2.0.0-rc.3 @angular/compiler@2.0.0-rc.3 @angular/platform-browser@2.0.0-rc.3 @angular/platform-browser-dynamic@2.0.0-rc.3 @angular/http@2.0.0-rc.3 @angular/core@2.0.0-rc.3 @angular/router@2.0.0-rc.2

like it says in the changelog, everything downloads fine. However, when I navigate to node_modules/ionic-angular/components I don’t see a ModalController component. So, it errors out when I try to build the code:

../node_modules/ionic-angular/index"' has no exported member 'ModalController'.

I even have gone as far as deleting my node modules and reinstalling them insuring that the package.json says beta.10 etc.


#5

I’ve a similar problem, no clue what’s happening so far.


#6

Ahh, you’re trying to use ModalController. That is not released yet. The docs point to the nightlies first, but you want to us the beta 10 version of the docs.


#7

When I originally posted the question I was not using modal Controller, I was using the navController to “present” the modal. But in the navController present function it was falling into the [’_tabs’] if statement which just returns nothing as shown in the original post.