Go ProSign in

This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

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.

You must be a Member to view code