How to load data inside a component
First of all this is my first article, I welcome every feedback you can give to me.
I choose this topic because it was helping me out so much to reduce logic from my components and move it to the place it might belong better. Today is all about how to load data inside a component. Therefore I have prepared 2 common approaches on how you get your data inside the component. So far so good lets get started.
Loading data in ngOnInit via route
The first approach I prepared covers the in my opinion “standard” way of getting data from a service into the component.
First of all I created a service that mocks a http-call to a notes-backend.
After that I created the component for showing a note in detail and added a Route to my RouterModule with the path “standard/note/:id” and the NoteDetailStandardComponent
I created a property called note$ to assign the service-call. Next injected the ActivatedRoute and NoteService to load my expected data. I then hook up on the params-Observable and map the given id parameter to then switch the outcome of the Observable to return an Observable of type Note . In the Template I assign the Observable via the async-Pipe to show the data.
Seperate the concerns
Next we will cover the other approach where I create a RouteResolver to load the data before the component is created. First I repeated the steps from the standard approach where i created a NoteDetailResolvedComponent and a route for access. After that I will create a Service that covers the logic for resolving the data.
I added the Resolve Interface to implement the logic that gets executed when we enter the route to load all data. Inside the resolve-method I called the noteService with the given id from the params to load my note. Next I will add the resolver to my route.
After that I will get my note inside of the component.
I just inject the ActivatedRoute and get my note from the ActivatedRouteSnapshot . Now I reduced my code inside the component to just getting the data from the route. I don’t need to subscribe to my Observable as the data is already there when ngOnInit gets called.
Conclusion
With smaller projects and also smaller components you might be tempted to use the standard-way which is totally fine as its working the same. But if your components are getting bigger over time I would recommend to use a Resolver as you can separate logic from your component which makes it a lot clearer. The component also can start rendering right away and doesn’t have to wait for the data to be loaded.
If you want to checkout the code and mess a little with it then go jump to my github-repo: https://github.com/officialMKL/data-loading-component
If you have any questions then post them in the comments or contact me on twitter https://twitter.com/officialMKL
