Search code examples
ionic4

How to sync app root template component with other components in app

I am adding products to wish-list and storing that products in local Storage in a component & in our root components I am showing the total count of wish-list products. The problem is that when I add a new product in the wish-list it will be stored in local storage and it will not update the total counts of wish-list products in my root component of ionic application.

This is the actual view of the core issue

Solution

  • Angular Service

    What you need to do is generate a service which stores the Favorites data and then point that at it. Josh has a good introduction to this:

    Basically the high-level overview is that you generate a service which can be injected into each component / page that you want to use it with and then it can provide services to them.

    For example you might make a login service so you can find out if the user is logged in from anywhere in the app, or you might want an analytics service, or it could be something more specific like maybe writing a weight conversion class that you can apply to many pages.

    Custom Events

    Another alternative to this is to have the favourites button emit a custom event which the menu item can listen for to update its own stored favourites value.

    This is introduced well in this article:

    The high-level overview is that you publish an event from one page:

    this.events1.publish('my-message', '👋 Hello from page1!');

    And then you handle that event on another page/component:

    this.events2.subscribe('my-message', (data) =>{
  console.log(data); // 👋 Hello from page1!
});