seyid yagmur seyid yagmur - 1 month ago 27
TypeScript Question

ionic 2 dependency injection between page and modal

I am passing data to my modal from my class like below.When I trigger

ChangeCheck()
function inside modal view,
checkin
is not changing when I go back to
MyMap
class.Do you know How can I chance it's value from my modal.

@Component({
selector: 'page-my-map',
templateUrl: 'my-map.html',
providers:[CommonVariables]
})

export class MyMap {
checkin:boolean=false;

constructor(public commonvar:CommonVariables,public modalCtrl:

ModalController,
public nav:NavController,public alertCtrl:AlertController) {
}

public openBasicModal() {//this functions is triggered once I click the button to open my Modal

let myModal = this.modalCtrl.create(ModalContentPage,{'myParam':this.checkin});
myModal.present();
}

}

@Component({//this is my modal template
templateUrl:'my-modal.html',
})
export class ModalContentPage {//my modal class
checkin:boolean;
constructor(public alertCtrl:AlertController,
public viewCtrl: ViewController,
params: NavParams,
public commonvar:CommonVariables
) {
this.checkin = params.get('myParam');//I am getting this value from MyClass .

}
ChangeCheck ( ) {//I trigger this function.but when I close the my modal, it doesn't change the checkin which inside `MyClass`.
this.checkin = !this.checkin;
}

dismiss() {
this.viewCtrl.dismiss();
}

}

Answer

Your also missing public for your params

public params: NavParams

To your Question : Of cource it will not change, you have to send it back.

Add this to your ModalController class

 let myModal = this.modalCtrl.create(ModalContentPage,{'myParam':this.checkin});

  myModal.onDidDismiss(data => {
     console.log(data);
   });
        myModal.present();

Then add this in your ModalContentPage class

    dismiss() {
   let data = { 'checkin': this.checkin };
   this.viewCtrl.dismiss(data);
    }