Update the page content once the popover is closed. Working with IONIC 3

In my application, there are 4 tabs, each displaying different data based on a specific configuration. The header of the page includes a popover component with settings options. When a user adjusts the settings and returns to a tab page, the content on that page should refresh.

I have tried using the ionViewDidEnter or ionViewWillEnter lifecycle events to detect if the settings have changed upon returning to the tab page. However, I noticed that these events only trigger when switching between different tab pages.

For Tab Page A:

export class HomePage implements OnInit {
  ionViewDidEnter(){
    if(this.client.doClientChanged(this.clientName)){
      console.log("changed");
    }
    else{
      console.log("not changed");
    }
  }
  ionViewWillEnter(){
    console.log("test")
  }
}

Header Component:

export class PrimeHeaderComponent {
  constructor(public popoverCtrl: PopoverController) {}

  presentPopover(event: any) {
    let popover = this.popoverCtrl.create(MenuPage);
    popover.present({
      ev: event
    });
  }
}

Popover Component:

export class MenuPage {

  constructor(
    public viewCtrl: ViewController, private navCtrl: NavController) {}

  openConfig(){    
    this.navCtrl.push(ConfigPage);    
  }
}

After selecting a configuration and returning to the previous page with the popover displayed, dismissing the popover does not trigger any lifecycle events.

Answer №1

Utilize the .onDidDismiss() function within the popover controller

let popover = this.popoverCtrl.create(MenuPage);

popover.onDidDismiss(() => {
  //add your custom action here
});

popover.present({
  ev: event
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When attempting to fetch data with a dynamic URL in next.js, the error message "undefined is returned

While fetching data on my main page everything works as expected. However, when trying to fetch data in another folder using the same code but with a dynamic URL, I encounter an error when attempting to use methods on an array. Interestingly, when I consol ...

Tips for extracting title and image from someone else's blog posts to share on your own website

Currently, I am in the process of creating a website where I can showcase my personally curated content. I have been struggling to figure out how to seamlessly integrate this content into my site without relying on an API. My initial idea was to manually ...

Is there a way to switch out the ionic2-super-tabs Toolbar for the ion-slides pager feature?

Hello there, Currently, I am utilizing the following plugin in my Ionic 3 project: https://github.com/zyra/ionic2-super-tabs The plugin offers a great functionality for swipeable tabs in Ionic applications. In its documentation, it demonstrates how to hi ...

react component not displaying image

I must admit, this might be a silly question but I'm just starting out in web development. My goal is to create a clickable image component that redirects to another page on the website. However, despite not encountering any errors, the image is not ...

Comparing defaultProps with the logical OR operator

Being relatively new to react, I’ve adopted a method of defining default values which looks like this: class TextInput extends Component { render() { return ( <input type="text" name={ this.pr ...

Update the href attribute when a button is clicked

Note: The buttons in the corner will not be submitting the search. The go button would still need to be clicked to submit it. Currently, I am working on a fun project during my free time at work. This project is not meant to be anything serious, but rathe ...

The Mongoose findByIdAndUpdate() method in NodeJS may sometimes result in a null return

Exploring the code snippet below in NodeJS, we focus on updating a document by its id: router.put('/:orderId', async(req, res) => { let update_orderId = req.params.orderId; let new_item = req.body.item; let new_item_desc = req ...

Creating a separation between Mongoose data access code and pure data objects in Node.JS using Object-Oriented Programming

I've stumbled upon a design dilemma regarding Mongoose - could it be that my approach is off? In the traditional OOP fashion, I aim to create a User class. This class includes various attributes such as username, firstname, lastname, salt, and hash, ...

The supertest request body cannot be found

Testing my express server POST endpoint using supertest has been a challenge for me. Although everything works perfectly in postman, I encountered an issue when trying to pass body parameters into the test. It seems like the body parameters are not being p ...

I rely on Nebular for my Angular application, however, I am looking to make some manual CSS changes that I am having difficulty implementing

While using Nebular for my Angular app, I have run into issues with changing some CSS manually. Specifically, when using nb-select or nb-toggle, I am unable to customize the CSS as desired. Do you have any suggestions to help me with this problem? enter i ...

Utilizing Vue.js i18n for a multi-line text display

Currently, I am implementing i18n single file component in order to provide translation support for my application. In order to achieve this, I have been utilizing the i18n tag as shown below: <i18n> { "fr": { "text": "Lore ...

Experiencing a 404 error after attempting to access an endpoint following a successful MSAL Azure AD

Incorporating the UserAgentApplication.loginPopup function to authenticate users on our Azure AD has been a challenge as we transition from an ASP.NET MVC application to a Vue.js front end and ASP.NET 'API' backend. The goal is to pass the access ...

The Bootstrap 4 dropdown feature is not functioning properly in Angular's production environment

While developing my Angular application with Bootstrap 4, I encountered an issue with the dropdown functionality. In the development mode, everything works perfectly. However, in production mode, I received the following error: Uncaught Error: DROPDOWN: ...

Finding it challenging to adapt an AngularJs component-based modal to TypeScript

When creating an AngularJS component in JavaScript and displaying it as a modal using ui-bootstrap, you need to pass bindings that the modal instance can use for dismissing or closing itself: app.component("fringeEdit", { controller: "FringeEditCont ...

Halt the script if the file has not been successfully loaded

Looking for a way to halt the script until $.get() has completed executing in this code snippet. $.get("assets/data/html/navigation.html", function(response) { $('body').append(response); }); $('body').append('<div class="m ...

Using Vuetify to filter items in a v-data-table upon clicking a button

My table structure is similar to this, https://i.sstatic.net/56TUi.png I am looking to implement a functionality where clicking on the Filter Button will filter out all items that are both male and valid with a value of true. users = [ { name: &apos ...

The AngularJS Input Validation TypeError occurs when attempting to use an undefined function for validation

Currently, I am working on input validation using Angular. However, when the function is triggered, all elements return as undefined. The crucial code snippets are provided below, but do let me know if you need more information. Your assistance is greatly ...

Flexbox helps create responsive layouts with ease

Utilizing flex to centrally position my element within my layers has worked well for me, but I encountered an issue when switching to a smaller screen size. The element simply scales down in size instead of taking up the full width like it does with Bootst ...

The string variable in the parent app is resetting to empty after being populated by the service call

I am facing an issue with my app components where AppComponent acts as the parent and ConfigComponent as the child. In the constructor of AppComponent, a service call is made to set a variable but I encounter unexpected behavior when trying to access this ...

What are the various undisclosed schema types in A-Frame?

I've been exploring different examples of property types in the official documentation and various Github repositories (though now I can't remember which ones). The latter introduced me to unique properties like "min" and "max" for numbers, as we ...