Ionic 4 - Updating a component with modal data?

Question

I’m developing an online ordering app using Ionic 4. This app has a benefits system. When the user opens the shopping cart he can open a modal where your available benefits are listed. When the user selects the benefit within the modal, this benefit should automatically appear in the cart, when the modal is closed.

cart.pagets.

...
beneficio:any
...
  async mostraBeneficios(){
    const modal = await this.modalController.create({
      component: BeneficiosComponent,

    });
    return await modal.present();
  }
...
 carregaBeneficioSelecionado(){
    this.beneficio = this.beneficioService.getBeneficios()
    console.log(this.beneficio)
  }
...

cart.page.html

...
      <!-- Botao que mostra modal -->
    <ion-buttons slot="end">
      <ion-button (click)="mostraBeneficios()">
        <ion-icon icon="../assets/icon/tag.svg"></ion-icon>
        Beneficios
      </ion-button>
    </ion-buttons>
...
  <!-- Item que deve mostrar o beneficio após ser selecionado -->
  <ion-item *ngIf="beneficio">
    <ion-label> {{ beneficio.nome }} </ion-label>
  </ion-item>
...

Modal: benefits.component.ts

constructor(
    private modalController: ModalController,
    private firebaseProvider: FirebaseProvider,
    private beneficiosService: BeneficiosService
  ) { 
    this.carregaBeneficios();
  }

  fechaModal(){
    this.modalController.dismiss();
  }
...
beneficios:any
...
  //  lista os beneficios disponiveis
  carregaBeneficios(){
    this.firebaseProvider.getBeneficios()
    .then((r) => {
      this.beneficios = r
    })
  }

  //captura o beneficio selecionado
  radioBeneficio($event){
    this.beneficiosService.setBeneficios($event.detail)
  }

benefits.component.html

<ion-content>
  <ion-list>
    <ion-radio-group name="auto">

      <ion-card *ngFor="let b of beneficios">
        <ion-card-header>
          <ion-item (ionSelect)="radioBeneficio($event)" lines="none">
            <ion-label text-left> {{ b.descricao }} </ion-label>
            <ion-label text-right>
              <ion-badge color="primary" mode="ios"> {{ b.pontos }} </ion-badge>
              <p>pontos</p>
            </ion-label>
            <ion-radio  [value]="b" color="success" slot="end"></ion-radio>
          </ion-item>

        </ion-card-header>

      </ion-card>

    </ion-radio-group>
  </ion-list>


</ion-content>

<ion-footer class="footer">
  <ion-button class="btn-footer" fill="clear" expand="full" (click)="fechaModal()">
    Cancelar
  </ion-button>
</ion-footer>

How can I update the <ion-item> in the cart.page.html automatically When the modal is closed?

Answer 1

There are many ways you can do this, using services/providers or sending a callback as input to modal, I’ll show you the example of callback:

async mostraBeneficios(){
const modal = await this.modalController.create({
  component: BeneficiosComponent,
  componentProps:{
      'callbackBeneficios': (beneficio) => {
          this.beneficio = beneficio
      }
  }
});
return await modal.present();

}

Just add an Input, which I named callbackBeneficio, and declare it in modal, in the Ionic documentation I could not find a way to add an Output in modal. I use this alternative because it works very well. Need to add import from Decorator Input angular:

   @Input() callbackBeneficios;

    constructor(
        private modalController: ModalController,
        private firebaseProvider: FirebaseProvider,
        private beneficiosService: BeneficiosService
      ) { 
        this.carregaBeneficios();
      }

      fechaModal(){
        this.modalController.dismiss();
      }
    ...
    beneficios:any
    ...
      //  lista os beneficios disponiveis
      carregaBeneficios(){
        this.firebaseProvider.getBeneficios()
        .then((r) => {
          this.beneficios = r
        })
      }

      //captura o beneficio selecionado
      radioBeneficio($event){
         this.callbackInput($event.detail)
        //this.beneficiosService.setBeneficios($event.detail)
      }

You can continue using the service tbm, but since you have not added the code of your service I will add as I would

    export class BeneficioService {

    beneficio$ = new Subject();

    getBeneficio(){
        return this.beneficio$.asObservable()
    }

    setBeneficio(data){
        this.beneficio$.next(data)
    }
  }

That way just subscribe to cart.page.ts inside your constructor:

    constructor( private beneficioService: BeneficioService ){
     this.beneficioService
      .getBeneficio()
    .  subscribe( res => this.beneficio = res )
   }

And return the code snippet as it was before

radioBeneficio($event){
       this.beneficiosService.setBeneficios($event.detail)
 }