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