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
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    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.