Chapter 17: Build a app Like Udemy using Lightning Web Component

As the famous saying goes “Practice makes a man perfect”. So in this chapter we will build a course component similar to Udemy displaying list of courses.

Topics Covered:

• Basic Overview of the app
• Component Design
• Component Communication in Lightning Web Component
• Understanding Code Line by Line

Basic Overview

We have two components:-

• enrollAllCourses(parent web component)
• enrollCourse(child web component).

The child component has been called in parent component.

Component Design

Code for enrollCourse component

enrollCourse.html

     
<template>
 
   <div class="slds-m-horizontal_x-small">
   <lightning-card class="slds-p-horizontal_small" title={courseDetailInfo.courseName} >
    <img
    src={courseDetailInfo.bannerImg}
    class="slds-align_absolute-center"
    alt="course"
/>
<br/>
        <ul class="slds-p-left_small slds-p-right_small">
            <li>Course Fee: {courseDetailInfo.courseFee}</li>
            <li>Course Duration: {courseDetailInfo.courseDuration}</li>
        </ul>
    <div slot="footer" class="slds-text-heading_large slds-text-color_success">
        {courseDetailInfo.courseRating}
    </div>
   </lightning-card>
</div>

</template>

enrollCourse.js

import { LightningElement,api } from 'lwc';

export default class EnrollCourse extends LightningElement {
    @api courseDetailInfo=
    {
    courseName:'Lightning Web Component',
    courseDuration:'30 Days',
    courseFee:'Free', 
    courseRating:'*****',
    }

}

enrollCourse.css

img{
    height:200px;
}

Understanding Code Line by Line: enrollCourse Component

Understanding Code line by line of JavaScript

import { LightningElement,api } from ‘lwc’:

imported api from lwc module

@api courseDetailInfo:

Created a public property by using @api decorator before it. Due to @api decorator I will be able to access this property in other component as well.The property is defined in js file and it is reactive. Hence it will be re-render when the value gets changed.

Understanding code line by line of HTML 

<lightning-card > : Created a lightning card

<img class=”card-img” src={courseDetailInfo.bannerImg} alt=”” />:

Used image tag to place an image. In src I called the Js property “courseDetailInfo” and added used “bannerImage” element.

{courseDetailInfo.courseFee} : Called this element to display courseFee

{courseDetailInfo.courseDuration} : Called this element to display courseDuration

{courseDetailInfo.courseRating}: Called this component to display courseRating

Code for enrollAllCourses component

enrollAllCourses.html

<template>
    <div class="slds-box slds-grid slds-gutters slds-wrap">
        <template for:each={courseDetailInfo} for:item="course">
            <c-enroll-course key={course.courseName} course-detail-info={course} class="slds-col">
            </c-enroll-course>
        </template> 
    </div>   
</template>

enrollAllCourse.js

import { LightningElement } from 'lwc';

export default class EnrollAllCourse extends LightningElement {
 
    courseDetailInfo=[
        {
        courseName:'Admin Certification',courseDuration:'30 Days',courseFee:'7,000', courseRating:'*****',
        bannerImg: 'https://img-a.udemycdn.com/course/480x270/693700_d3eb_4.jpg'
        },
        {
        courseName:'Apex development',courseDuration:'30 Days',courseFee:'10,000', courseRating:'*****',
        bannerImg: 'https://img-a.udemycdn.com/course/480x270/648408_b651_6.jpg'
        },
        {
        courseName:'Lightning Web Component',courseDuration:'30 Days',courseFee:'10,000', courseRating:'*****',
        bannerImg: 'https://img-a.udemycdn.com/course/480x270/2357210_2933_3.jpg'
        },
        {
        courseName:'Aura Component',courseDuration:'25 Days',courseFee:'9,000', courseRating:'*****',
        bannerImg: 'https://img-a.udemycdn.com/course/480x270/2510230_cae8_2.jpg'
        },
        {
            courseName:'Integration',courseDuration:'30 Days',courseFee:'12,000', courseRating:'*****',
        bannerImg: 'https://img-a.udemycdn.com/course/480x270/2423524_4df3_2.jpg'
        },
        {
            courseName:'Apex Triggers',courseDuration:'10 Days',courseFee:'3000', courseRating:'*****',
        bannerImg: 'https://img-a.udemycdn.com/course/480x270/3183172_c122_5.jpg'
        }
    ];
}

Understanding Code Line by Line: movieList Component

Understanding code line by line of JavaScript

courseDetailInfo=[] :

Declare courseDetailInfo property which is an array and it holds information about different courses like courseName, courseFee, courseRating etc.

Understanding code line by line of HTML

template for:each={courseDetailInfo} : 

User for: each directive and put the property name “courseDetailInfo” inside it. We use for: each inside the template

for:item=”course”

From the array we want to access current item so use for:item and give it any name. I have given “course”. This holds the current element when the iteration will happen.

c-enroll-course:

Here I want to exposes “courseDetailInfo” property. As enrollAllCourses(parent component) contains c-enroll-course so it can call “courseDetailInfo” property from the child component.

key={course.courseName}:

To access current element we need to use the item which holds the current  value within the curly braces so we put {course}

Also, the first nested element of the for:each directive should have unique key which will come from item in the list we created. I have assigned courseName as a key here. Therefore put as {course.courseName}

course-detail-info={course}:

course-detail-info is the property coming from enrollCourse(child component) and to access current element we need to use the item which holds the current value within the curly braces so we put {course}

class=”slds-col” :

Add a grid container by adding slds-col to an HTML element

Conclusion: Falling In Love With The Process, Not The Results !

Together we can learn faster !

Join LWC study group on Telegram 

Subscribe to Youtube channel and blog to get latest updates