Create Container Components for Retrieving Data in an Angular CLI Project
In this lesson we will add the ProductModule, where our actual application code will live.
ng g m product --routing
We will add 2 routes to AppRoutingModule, the first is a redirect route that redirects any unhandled paths to products. The second route is the actual products route, that 'lazy-loads' the ProductModule.
We use the ng command to create the ProductListComponent and ProductDetailComponent, which are so called 'containers components'.
Container components are responsible for fetching data, handling routes and passing data into the 'presentational components'
We will add 2 routes to ProductRoutingModule, one to each of our new Container Components.
Lastly we will use ActivatedRoute in ProductDetailComponent to fetch the :id from the route.
Instructor: [00:00] We run ng g and products that pass in the text as routing flag to generate a routing file. We open app-routing module and add a children property to the existing routes, and initialize it as an array.
[00:13] Inside this array, we create two new routes. The first route redirects any unknown routes to the \product routes. The second one is the actual product routes and it lazy loads its children from our new product module.
[00:26] When we refresh our app, we see it navigates to the \product routes. To get the maximum out of type route, we'll create a module for product using ng g class product\modules\product.
[00:40] We open this new file and add the following properties -- an ID of type string, name of type string, description of type string, image of type string, and price of type number. We'll add two container with smart components and add a route to them. These components will be responsible for retrieving the data and passing it into our presentational or dumb components.
[01:03] We use ng generate components to create a product list of product detail components. We open product routing module and add a routes to product list components with the path set to an empty string. The rout to product detail components has to path set to
[01:18] Colon ID.
[01:23] Now to see the product list appear, we need to fix a small mistake I made in the alt component -- the margin and padding should be on the Y-axis, not just on the bottom. Now, we see product list. We open the product list components and set the templates to products and square brackets and pipe through the JSON pipe.
[01:40] Inside the component class, we add a products property of type products array, and initialize it with an empty array. We open product detail components and set the template to products and square brackets and pipe it through the JSON pipe.
[01:54] In our component class, we add a product property and set a type to product, and initialize it with new products. To fetch the ID property from a URL, we inject a private route ActivatedRoute in our ngOnInit block we assign this.product to the ID to this.route.snapshot.paramapp.getID.
[02:14] If we pass in a random ID to a URL, we see that the route renders the product detail components, and that will receive the ID from the router.