What is the better practice to pass data between the component and the main page

Ionic Framework ionic-v3
1

Hi guys, I am confused about the data passing between the main page, and its components. Here is the example, I have this page call restaurant.ts, and inside it, I have 3 to 4 components like restaurant-detail-main.component.ts, restaurant-detail-info.component.ts.

I have a provider which has the whole array of object which contain only one restaurant, like
public restaurant: [
{
id: 1,
restaurantName: ‘Super Nice Cafe’
}
]

Okay, here is the main question in my mind,

  1. should I just inject the provider one time in the main restaurant.ts, and pass array to components.
  2. Or should I inject every time I need the data, whether in components or pages.

Appreciate your advice :slight_smile:

2

#2 hands down. Providers are in charge of managing data, and pages are in charge of displaying it and interacting with the user.

However, don’t actually expose the raw array in the provider. Instead, expose an Observable of it (usually implemented by some flavor of Subject internally), and subscribe to that in each page that cares. That way any page (or other external force) that modifies the array will seamlessly have those changes reflected in every consumer without any need for further work on your part.