Ionic 4-update a component with data from a modal? [closed]

Question

Ionic 4-update a component with data from a modal? [closed]

Closed. this question is out of scope and is not currently accepting answers.

want to improve this question? Update the question so it's on-topic for Stack Overflow.

Closed 5 months ago .

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

Cart.page.ts

...
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 is the modal closed?

0

modal angular ionic ionic4

Author: Renan Cesar de França, 2019-10-17

Source

1 answers

score 1 · Accepted Answer

There are many ways you can do this, you could do it using the services / providers or sending a callback as input to the modal, I'll show you the example of the 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 the modal, in the ionic documentation I found no way to add an output in the modal. I use this alternative because it works very well. Need to add the import of decorator Input do 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 service tbm, but since you did not add 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)
    }
  }

This way just make a subscribe in the 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)
 }