CODEWITHSUNDEEP
angulartypescriptionic2ionic3
gaurang
gaurang

Reputation: 2240

how to reflect changes of component from one page to another

I have on select-option control which will come in many pages so i have created one page and put that select-option in to that page and called that page in other pages. when i use this component in page 1 and the selected values reflect in page2 using inputs and outputs, but the changes made in page2 and on closing page2 the changes are not reflecting in page1, so can anyone help me to solve this? what i have done so far....

custom-nav-bar.html

<ion-toolbar>
  <ion-navbar primary>

        <ion-item text-wrap>
          <!-- <ion-label>Gaming</ion-label> -->

          <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'],//choose as input to get input from the pages for ngModel
  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);
}
}

Upvotes: 3

Views: 974

Answers (2)

Tushar Kotecha
Tushar Kotecha

Reputation: 774

Parent

ionViewWillEnter() {
    this.myData = this.navParams.get('myDataKey') || null;
}

Child

ionViewWillLeave() {
    this.navCtrl.getPrevious().data.myDataKey = this.myData;
}

Upvotes: 2

Sampath
Sampath

Reputation: 65930

Another method of doing that is using Storage module.

custom-nav-bar.ts

onChange() {
    this.storage.set('choose', this.choose);//you can retrive this value from anywhere
  }

page2.ts

ionViewDidEnter(){
    this.storage.get('choose').then((val) => {
        let choose = val;
      });
}

Upvotes: 0

Related Questions