Example Request: Update list on previous nav page

Ionic Framework ionic-v3
1

Hello fellow Ionicans!

Just wondering if anyone has a good example of how to update a list one component from a navigated to component.

Scenario:

  • Component/Page which contains a list of somethings, say puppies obtained from a rest service component.
  • When you click on a puppy in the list, the nav.push occurs to load the puppy detail page passing the puppyId.
  • The puppy detail page loads showing the puppy’s details.
  • You change the puppy’s title and click save.
  • You then click back button to return to the list page.
  • The list page should now be updated to show the new puppy’s name. Without having to make a new call to the rest service.

Question: How do we update the list with the new puppy name from the puppy detail page?

Bonus Question: How do we add a new puppy to the list from the puppy detail page?

I have looked at events, @Inject and DI, but not able to get these to work making me think I am way off base or the examples are for pre-version I am using.

Thanks for any help and I hope to return it to you soon.

2

This is super-easy with Angular and Ionic. What you need to do is make sure the list page and the details page are sharing the same instance of the JavaScript model object. When you change it on the details page, the template for the list page will notice the change and re-render automatically. Nothing special needs to be done.

This is easiest to handle through a service. So have a service that maintains an array of puppy objects. The details page should just update one of those puppy objects in place (make sure it is not creating a new puppy). Then when you go back to the list page, it will be re-rendered automatically.

1 Like