Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Create Container Components for Retrieving Data in an Angular CLI Project

    Bram BorggreveBram Borggreve

    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.

    angularAngular
    ^6.0.0
    angular-cliAngular CLI
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss