Ionic 4 - "Header" Component with a select that reloads current page

Ionic Framework
1

I have a header component, like this one:

That I can select a key data on my app.
How can I reload current page after selecting a new value on that modal?

On all pages I have this event overwriten:

ionViewWillEnter , so I guess if we ‘re-load’ the page it will be enough to update the screen’s data.
How can I do that from inside the component?

2

In header.component.ts you need to add a observable for action close.
y downloaded you repo.
this is your code

  async presentModal() {
    const modal = await this.modalCtrl.create({
      component: SelectorPage,
      cssClass: 'selector-modal'
    });    
    return await modal.present();
  }

you need to add onDidDismiss()

async presentModal() {
    const modal = await this.modalCtrl.create({
      component: SelectorPage,
      cssClass: 'selector-modal'
    });

    modal.onDidDismiss()
      .then((data) => {
        /*Here you must write the function that made the changes 
         that you want to be executed when you close the modal,
        and in data will come the variables that you send from the modal*/
      
     /*for example
      this.reloadDataFunction()
     */
      }); 
    return await modal.present();
  }

And in selector.page.ts you have this

  async dismissModal() {
     this.modalCtrl.dismiss({
       'dismissed': true
    });
  }

Change for

  async dismissModal() {
    this.modalCtrl.dismiss({ //you variable to change });
    /*Example
  let value ={
             id: 1,
             description: "Class One"
           }
    this.modalCtrl.dismiss(value);*/
  }

and the value will be received in the header.component when you close the modal…

Good luck :wink:

As I said download your code and try what I leave you above and it goes perfectly.

you can see more about it in the modal documentation in ionic docs

3

My main issue is that Selector.page.ts that has the dismiss function, doesnt know what data needs to be reloaded. Mainly all pages loads their data on ionViewWillEnter function.

Is there a way to call that function or trigger that event after selecting an element on the modal / selector.ts ?