Create Angular Resolvers to retrieve the product data from the Service

Instructor: [00:00] The container components fetch the data by subscribing to the service in the ngOnInit method. While this works it has some drawbacks. This can be shown by opening the network tab in Chrome DevTools and setting the connection to slow 3G.

[00:14] We can prevent this by creating a resolver that the router can use to retrieve the data. We open the file and add export class product-resolver. We add the Injectable decorater and that function takes an object with provided n set to route.

[00:28] We add implement resolve of type product array. Next, we add a constructor and inject PrivateService ProductService. We implement the resolve method and make it return this.service.getProducts. To use this resolver, we open products routing module, and in the routes to product list component, we add the resolve property.

[00:49] We add a key products and set the value to product-resolver. The next step is to update the product list components. We change the constructor, so it only injects private routes ActivatedRoutes. In the ngOnInit method, we call in this.route.data.

[01:03] We invoke the pipe function and use the map operator to take the product's property from the data object. Let's remove the colon to the servers and just reuse the same subscription we use before.

[01:14] When we now check in the browser, we see that the product list still works and that the route does not change until the data is loaded.

[01:21] Let's quickly do the same for the product details. We copied the product-resolver to product-resolver singular.

[01:28] We renamed the class product-resolver to product-resolver singular. We changed the result type from product array to product. We add the parameter route of type ActivatedRouteSnapshots to the resolve method.

[01:40] We change the method getProducts to getProducts, and lastly we pass in routes.paramapp.getID. In the products routing module, we add the resolve key to the product detail routes. We set the key to products and product-resolver as the value.

[01:55] The product detail components will remove the product service from constructor and imports in the ngOnInit method we call into this.route.data. Invoke the pipe function and use the map operator to get the products key from the data objects, and reuse the subscribe methods.

[02:10] When we navigate through the app, we see that it works as expected without any empty components. Let's quickly set the speed back to online before we forget.