I have a select-option control that appears on multiple pages, so I created a single page to contain the select-option and then included that page in other pages. The issue I am facing is that when I use this component on page 1 and update the selected values in page 2 using inputs and outputs, any changes made in page 2 do not reflect back in page 1 upon closing page 2. Can someone help me resolve this issue? Here's what I have tried so far....
custom-nav-bar.html
<ion-toolbar>
<ion-navbar primary>
<ion-item text-wrap>
<ion-select interface="popover" (ionChange)="onChange()" [(ngModel)]="choose">
<ion-option [value]="cg" *ngFor="let cg of chArr;" >{{cg.fname}}</ion-option>
</ion-select>
</ion-item>
</ion-navbar>
</ion-toolbar>
custom-nav-bar.ts
@Component({
selector: 'page-custom-nav-bar',
templateUrl: 'custom-nav-bar.html',
inputs: ['chArr', 'choose'],
outputs: ['optionpageselection']
})
export class CustomNavBarPage {
choose: any;
optionpageselection: EventEmitter<string> = new EventEmitter<string>();
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad CustomNavBarPage');
}
onChange() {
console.log("onchange called in custNav")
this.optionpageselection.emit(this.choose);
}
}
page1
export class page1 {
choose: any;
onChange(event) {
this.choose = event;
console.log("you have selected")
console.log(this.choose);
}
}
page1.html
<ion-header>
<page-custom-nav-bar [chArr]="chArr" [choose]="choose" (optionpageselection)="onChange($event)" ></page-custom-nav-bar>
</ion-header>
<ion-content padding>
</ion-content>
page2.html
<ion-header>
<page-custom-nav-bar [chArr]="chArr" [choose]="choose" (optionpageselection)="onChange($event)" ></page-custom-nav-bar>
</ion-header>
<ion-content>
</ion-content>
page2.ts
export class page2{
chArr: any;
choose: any;
constructor(public navCtrl: NavController,
public navParams: NavParams, private storage: Storage,
public alertCtrl: AlertController) {
this.chArr = navParams.get('chArr');
this.choose = navParams.get('choose');
console.log('choose ' + this.choose);
}
onChange(event) {
this.choose = event;
console.log("you have selected in page2")
console.log(this.choose);
}
}