Reload a page when new data is sent Ionic 4

Question

I have a page that displays a list of users in my app. However, the page has a popover that gets a distance from the user and attempts to change the list depending on the distance. The problem is that once the new distance is selected nothing happens. How can i reload this page with the new data. The api call is working fine as I can see a console.log of the new object with the new users.

changeLocationComponent(popover)

   changeLoc() {
        console.log('Get slider value');
        console.log(this.distance);
        this.viewService.viewPatient1(this.distance).subscribe((res: any) => {
          console.log('Distance', this.distance);
          if (!res) {
            console.log('No Patients');
          } else {
          console.log('Result');
          console.log(res.patients.data);
          this.patients = res.patients.data;
          // this.router.navigate(['view-patient']);
          this.navCtrl.navigateForward('/view-patient');
        //  this.ref.detectChanges();
        }
        });

patients-page.ts

ngOnInit() {
  }

  ionViewWillEnter() {
    this.viewPatients();
  }

  viewPatients() {
  this.viewService.viewPatient().subscribe((res: any) => {
    if (!res) {
      console.log('No Patients');
    } else {
    this.patients = res.patients.data;
  }
  });
  }

  async notifications(ev: any) {
    const popover = await this.popoverCtrl.create({
        component: NotificationsComponent,
        event: ev,
        animated: true,
        showBackdrop: true,
        cssClass: 'pop-over-style',
    });
    return await popover.present();
}

Answer 1

You need to dismiss the popover to send the data which is changed. You get the patients data back from your http call to the viewService. So then you need to pass that data back to the original page.

changeLoc() {
  // your code here or create a button to close the popover
 this.popoverController.dismiss(this.patients);
}

On the patients-page you need to collect the data which you just dismissed. You will receive an OverlayEventDetail as a response from the Popover. This is defined in the docs here: https://beta.ionicframework.com/docs/api/popover. Your sent data is stored in the returned variable patients, which has a data object (you can console.log() it to see for yourself). Then assign that info back to your variable on the page.

async notifications(ev: any) {
  const popover = await this.popoverCtrl.create({
      component: NotificationsComponent,
      event: ev,
      animated: true,
      showBackdrop: true,
      cssClass: 'pop-over-style',
  });
  popover.onDidDismiss().then(patients => {
    if (patients) {
      this.patients = patients.data
    }
  });
  return await popover.present();
}