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

    angular-cliAngular CLI

    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.



    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In




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

    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.

    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.

    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.

    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.

    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 in curly braces. We load that.

    We create an ng-template and add the identifier link with a hash sign. Inside our template, we create an tag, set the content to in curly braces, set routerLink directive in square brackets, and assign it to 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.

    Underneath our card-header, we create an image tag with class card-image. We set hdr.src to product.image and hdr.else to 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.

    Inside the card-body, we add a

    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

    with class text-right and my-2. The content of this

    tag is product.price in curly braces.

    A quick update to the header -- we're going to add an

    with class my-2 and place the ng-container and the ng-template inside the

    . We can then remove my-2 from card-header.

    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.

    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.