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.