Angular v4: Do we store data in a Service or the Component or both?
Angular v4: Do we store data in a Service or the Component or both?
After reviewing quite a few tutorials, as well as reading the documentation of Angular, I'm still not clear on this subject.
https://angular.io/tutorial/toh-pt2 Angular's tutorial clearly shows data stored in the Component.
https://angular.io/guide/architecture#services Angular's Architecture > Services section shows code with the service having an array of data (is this proper?).
If we store data in Components, we would heavily used @Input and @Output to move data between child components (assuming we want this data in the front end), however this poses a problem when we use routing, we would need our new Component which loaded from the router-outlet to make a new call to our service for a promise to make the API call to our server to hold data. Possibly in this case we would have 2 components holding the same data - however they may not match.
If we store data in a Service, we would heavily use our Services to retrieve data, and manipulate data (assuming we want this data in the front end) this way our service holds 1 set of data, and each component may call on the service data at any time to get consistent data.
--
What is the proper way of storing data? Is one of the other not advised?
Answer
Generally speaking, you want to store data in a service if a lot of components use the same data. That way, it makes it extremely easy to access the same data from all different parts of your app. If one component modifies the data in the service, it will be modified for all the components that use the data which is usually very helpful. However, sometimes it is unnecessary if you only need to send data from one component to another, where one is a parent of the other. In this scenario, using input/output would be advised.
If you don't need to send the specific data between various components, then storing the data in a component is perfectly acceptable! Keep in mind that it will not be accessible from other components unless you use input/output.