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.
Instructor: [00:00] We use ng g c to generate ProductsComponent and a products component. In our product list component, we update our template and reference new app-products component. We pass in an input named products and set it to the local variable products.
[00:16] When we save and reload, we see that we have an error in our console. Let's fix it by opening the products component, add a public products property, and decorate it with the Input decorator, which is a function. On save, we see that the error is gone.
[00:30] We add a div with class row. Inside that div with class col-md-6, col-lg-4 and mb-3 to make the columns responsive with some margin on the bottom, we add the ngFor directive and assign the expression let product of products to loop over each of our products that we get from our inputs.
[00:50] Inside our ngFor loop, we call into our app-product component, pass in the products we are looping over, and set details to false because we don't want to show the details in the list view.
[01:01] Let's build product components. We first add two inputs -- a public product of type product, public details of type boolean. In the template, we add a div with class cards. Inside the cards, we add a div with class card-header.
[01:19] We now create an ng-container with an ngIf statement that checks if details is true. If not, it renders link. Inside this ng-container, we show product.name in curly braces. We load that.
[01:32] We create an ng-template and add the identifier link with a hash sign. Inside our template, we create an <a> tag, set the content to product.name in curly braces, set routerLink directive in square brackets, and assign it to product.id. If our details is true, it will show the text only. If it's false, it will render the ng-template with a link inside it.
[01:56] Underneath our card-header, we create an image tag with class card-image. We set hdr.src to product.image and hdr.else to product.name. We create a div with class card-body and an ngIf statement with the details expression, so it will only display when we want to see the details.
[02:15] Inside the card-body, we add a <p> tag with class my-2. Inside that, we render product.description in curly braces. We create a div with class card-footer and inside that an <h4> with class text-right and my-2. The content of this <h4> tag is product.price in curly braces.
[02:41] A quick update to the header -- we're going to add an <h4> with class my-2 and place the ng-container and the ng-template inside the <h4>. We can then remove my-2 from card-header.
[02:53] Now let's go to the product detail component, set the template to our app-product component, pass in the product input, and assign it to our local products. We set the details input to true.
[03:05] We see that the product description does not get displayed, so let's open the products component and fix the ngIf statements. We can now navigate from our products list to the individual products.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!