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.
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.