Here's what I am trying to do.
I am not sure how to pass value from a Ionic2 Popover to it's parent component. If I understand it correctly Ionic2's Popover is a child component. However I dont know how to pass the [(ngModel)]
value out.
I know it looks messy here... well if only someones kind enough to make a simple example of how to pass value from PopOver to the Page...
So... this all in one file:
import {Component, Injectable, Input, Output, EventEmitter} from '@angular/core';
import {ViewController, NavController, Popover, Content, Events, NavParams} from 'ionic-angular';
import {CardService} from '../../providers/card-service/card-service';
import {LangService} from '../../providers/lang-service/lang-service';
import {GlobalService} from '../../providers/global-service';
The Popover component:
@Component({template: `
<ion-list radio-group [(ngModel)]="selected" (ionChange)="loadc(selected)">
<ion-item *ngFor="let chapter of menuArray">
<ion-label>{{chapter.ctitle}}</ion-label>
<ion-radio value="{{chapter.cchap}}" ></ion-radio>
</ion-item>
</ion-list>
`,
providers: [CardService, LangService, GlobalService],
directives: [LangService]
})
@Injectable()
export class ChapterService{
private chpselected : any;
private menuArray: any;
constructor(
private viewCtrl: ViewController,
private navController: NavController,
public cardService: CardService,
public langService: LangService,
public globalService: GlobalService
) {
this.menuArray = [
{
id: 0,
cchap: '01',
ctitle: 'One',
},
{
id: 1,
cchap: '02',
ctitle: 'Two',
},
{
id: 2,
cchap: '03',
ctitle: 'Three',
},
];
///
this.chpselected = this.menuArray[0];
///
};
close() {
this.viewCtrl.dismiss();
}
///-------------------------------
Here I triggers an even when clicking the radio buttons in the popover. I want to call the loadCards() function in the HomePage class below so it returns what is selected and load the correct JSON in the DOM. However I do not how to pass this loadc() value to loadCards().
///-------------------------------
loadc(x){
console.log(x);
this.globalService.nowchap = x;
};
};
Another Class here, the Page:
@Component({
templateUrl: 'build/pages/home/home.html',
providers: [CardService, LangService, ChapterService, HomePage, GlobalService],
directives: [LangService]
})
@Injectable()
export class HomePage {
///
public cards;
public viewmode : any;
constructor(
private navController: NavController,
public cardService: CardService,
public langService: LangService,
public globalService: GlobalService
//public chapterService: ChapterService
){
this.viewmode ="read";
this.loadCards();
};
/* POPOVER*/
presentPopover(myEvent) {
let popover = Popover.create(ChapterService);
this.navController.present(popover, {
ev: myEvent
});
}
/* Contents are loading here */
public loadCards(x){
console.log("this chp is "+x);
this.cardService.load(x)
.then(data => {
this.cards = data;
});
}
/* LOAD CARDS ENDED*/
///
}
No need for Service, it just complicates things..
See complete plunkr here - https://plnkr.co/edit/s6lT1a?p=info
it the caller, pass a callback...
presentPopover(myEvent) {
let popover = Popover.create(PopoverComponent,{
cb: function(_data) {
alert(JSON.stringify(_data))
}
});
this.nav.present(popover, {
ev: myEvent
});
}
in the popover...
constructor(private params: NavParams. /* removed rest for purpose of demo */ ) {
this.callback = this.params.get('cb')
}
public loadc(x) {
this.callback(x)
// Close the popover
this.close();
}