Use Input and Output in ionic pages/modals

Ionic Framework ionic-v3
1

I’d like to use angular2 input and output bindings for pages and modals in Ionic 2. My home page contains many different pieces of information including info for many parties displayed using a loop.

I would like to open another page, or better a modal, passing the info of one of the parties using [party] = 'selectedParty'. Changing it in the modal/page should automatically change it in the homepage hosting the input. If this is not the way to do it with Ionic 2, please guide me to the right direction.

Using NavParams maybe is good for passing a piece of info to another page, but passing it back with this doesn’t seem to make sense.
Using this in the home page this.party = _navParams.get("party") will not tell me which party is coming back, as well I will have to do this for every piece of info I want to have the modal for.

 <ion-item *ngFor='let party of calculation?.parties'>
  <ion-label>{{party.name}}</ion-label>
  <ion-label (click)='selectedParty=party'>
    <div class='float-right italic xs'>
      <span class='party-gender' *ngIf='party.gender === "M"'>Male,</span>
      <span *ngIf='party.gender === "F"'>Female,</span>
      <span>{{party.age || 0}}, </span>
      <span>Resident of {{party.provinceId}}</span>
    </div>
  </ion-label>
 </ion-item>
</ion-list>

 <page-edit-party-info 
  *ngIf='selectedParty'
  [party]='selectedParty'
>
</page-edit-party-info>
2

Then this sounds like a better fit for a provider that is injected in both of those two places than it does for an @Input binding.

3

Thank you. Nevermind the automatically part. What is the best way to pass data back and forth between two pages (or page and modal) when 2nd page changes some of the data of the 1st page?

4

From the documentation on ModalControllers

A modal can also emit data, which is useful when it is used to add or edit data. For example, a profile page could slide up in a modal, and on submit, the submit button could pass the updated profile data, then dismiss the modal.

I think this is what you are looking for, see the sample source code using presentProfileModal