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 Presentational Components for Displaying Data in an Angular CLI Project


    In this lesson we will create the presentational components for the product list and detail pages. These components define how the data is displayed and are being referenced from the Container components.

    The new components are ProductsComponent and ProductComponent.

    After using ng generate to generate these components, we will update the ProductListComponent to invoke ProductsComponent and pass in our local products array.

    In ProductsComponent we loop over each of the items we get from the @Input() products and pass each one into our ProductComponent.

    The ProductComponent has 2 Inputs(), one for the Product and a boolean that toggles showing the product details. This is useful because don't want to show product details in the list view.

    After the ProductComponent is implemented the last step is to reference it from the ProductDetails container component.