Tribute to Sushant Singh Rajput: Made using Lightning Web Component

Hi everyone, In this chapter, we will understand component communication in Lightning Web Component.

Topics Covered:

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

Parent to Child Communication

A public property of any child can be accessed through parent components by using @api decorator.

Basic Overview

We have two components:-

movieList (parent web component)
movieTile (child web component).

The child component has been called in parent component.

I created a component named movieTile. I have created a lightning card in that component.
I created another component movieList and called movieTile from that component.
Iterated over the array to display the results

Note Below Points:

To expose a public property, decorate it with @api
Public properties are part of a component’s API.
To communicate down the containment hierarchy, owner and parent components can call JavaScript property on child components.

Component Design

Code for movieTile component

movieTile.html

<template>
<div class="slds-m-horizontal_x-small">
<!-- lightning card is a base component -->
    <lightning-card >
       <div>
    <img class="card-img"
        src={sushantMovies.bannerImg}
        alt="movie poster"
    />
    </div>
    <br/>
    <div>
<!-- accessing javascript property -->
        <p class="title slds-align_absolute-center">{sushantMovies.movieName}<br/><br/></p>
        <p class="slds-align_absolute-center">Director : {sushantMovies.director}</p>
        <p class="slds-align_absolute-center">Release Date : {sushantMovies.releaseDate}<br/></p>
        <br/>
        
<!-- a is anchor tag to redirect to another page. Target- blank will open in
new tab -->
       <a href={sushantMovies.trailer} target="_blank">
            <lightning-button 
                label="Watch Trailer"
                class="slds-align_absolute-center">
            </lightning-button>
        </a>
    
    </div>
    </lightning-card>
    </div>
    </template>

movieTile.js

import { LightningElement,api } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';


export default class MovieTile extends LightningElement {
    @api sushantMovies=   {
        movieName:'Dil Bechara',
        director:'Mukesh Chhabra',
        stars:' Sushant Singh Rajput, Sanjana Sanghi, Swastika Mukherjee',
        movierating:'*****',
        releaseDate:'24 July 2020;',
        bannerImg: 'https://cdn.bollywoodmdb.com/movies/largethumb/250x267/2018/the-fault-in-our-stars-remake/poster.jpg',
        trailer:'https://www.bollywoodmdb.com/movies/broadband/dil-bechara-official-trailer'
        }
}

Understanding Code Line by Line: movieTile Component

Understanding Code line by line of JavaScript

import { LightningElement,api } from ‘lwc’:

imported api from lwc module

@api sushantMovies :

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={sushantMovies.bannerImg} alt=”movie poster” />:

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

{sushantMovies.movieName} : Called this element to display movie Name

{sushantMovies.director}: Called this element to display director

{sushantMovies.releaseDate}: Called this element to display release date

<a href={sushantMovies.trailer} >

The <a> tag defines a hyperlink, which is used to link from one page to another.

{sushantMovies.trailer} will redirect to the particular trailer of the movie.

target=”_blank” : specifies to open link in a new tab

<lightning-button label=”Watch Trailer” >

lightning-button component represents a button element that executes an action.

Output for movieTile Component

Code for movieList component

movieList.html

<template>
    <div>
    <div class="slds-grid slds-gutters">
    <div class="slds-col slds-size_1-of-3">
        <img class="logo" src="https://i.pinimg.com/originals/1a/51/a3/1a51a38dc69b958999755c15c5dda05f.jpg"
        />
    </div>
    <div class="slds-col slds-size_2-of-3 slds-p-top_xx-large" >
        <h1>Remembering Sushant Singh Rajput: 1986–Forever</h1>
    </div>
            <c-movie-tile key={movies.movieName}

                          sushant-movies={movies} 

                          class="slds-col">
            </c-movie-tile>
        </template> 
    </div> 
</div>  
</template>

movieList.js

import { LightningElement } from 'lwc';

export default class MovieList extends LightningElement {
    sushantMovies=[
        {
        movieName:'Dil Bechara',
        director:'Mukesh Chhabra',
        stars:' Sushant Singh Rajput, Sanjana Sanghi, Swastika Mukherjee',
        movierating:'*****',
        releaseDate:'24 July 2020;',
        bannerImg: 'https://cdn.bollywoodmdb.com/movies/largethumb/250x267/2018/the-fault-in-our-stars-remake/poster.jpg',
        trailer:'https://www.bollywoodmdb.com/movies/broadband/dil-bechara-official-trailer'
        },
        {
        movieName:'Drive',
        director:'Tarun Mansukhani',
        stars:' Sushant Singh Rajput , Jacqueline Fernandez, Vikramjeet Virk',
        movierating:'*****',
        releaseDate:'01 November, 2019',
        bannerImg: 'https://cdn.bollywoodmdb.com/movies/largethumb/250x267/2017/drive/poster.jpg',
        trailer:'https://www.bollywoodmdb.com/movies/broadband/drive-official-trailer'
        },
       {
        movieName: 'Chhichhore',
        director:'Nitesh Tiwari',
        stars:'Sushant Singh Rajput , Shraddha Kapoor, Varun Sharma',
        movierating:'*****',
        releaseDate:'06 September, 2019',
        bannerImg: 'https://cdn.bollywoodmdb.com/movies/largethumb/250x267/2019/nitesh-tiwari-s-next/poster.jpg',
        trailer:'https://www.bollywoodmdb.com/movies/broadband/chhichhore-dosti-special-trailer'
        },
        {
        movieName: 'Sonchiriya',
        director:' Abhishek Chaubey',
        stars:' Sushant Singh Rajput , Bhumi Pednekar, Manoj Bajpai',
        movierating:'*****',
        releaseDate:'01 March, 2019',
        bannerImg: 'https://upload.wikimedia.org/wikipedia/en/thumb/4/46/Sonchiriya_poster.jpg/220px-Sonchiriya_poster.jpg',
        trailer:'https://www.bollywoodmdb.com/movies/broadband/the-rebels-of-sonchiriya'
        },
        
        {
        movieName: 'Kedarnath',
        director:'Abhishek Kapoor',
        stars:'Sushant Singh Rajput , Sara Ali Khan, Nitish Bharadwaj',
        movierating:'*****',
        releaseDate:'07 December, 2018',
        bannerImg: 'https://cdn.bollywoodmdb.com/movies/largethumb/250x267/2018/kedarnath/poster.jpg',
        trailer:'https://www.bollywoodmdb.com/movies/broadband/kedarnath-official-trailer'
        },
        {
        movieName: 'Raabta',
        director:'Dinesh Vijan',
        stars:'Sushant Singh Rajput , Kriti Sanon, Jim Sarbh',
        movierating:'*****',
        releaseDate:'09 June, 2017',
        bannerImg: 'https://cdn.bollywoodmdb.com/movies/largethumb/250x267/2016/raabta/poster.jpg',
        trailer:'https://www.bollywoodmdb.com/movies/broadband/raabta-official-trailer-sushant-singh-rajput-kriti-sanon'
        },
        {
        movieName: 'M. S. Dhoni - The Untold Story',
        director:'Neeraj Pandey',
        stars:'Sushant Singh Rajput , Kiara Advani, Disha Patan',
        movierating:'*****',
        releaseDate:'30 September, 2016',
        bannerImg: 'https://cdn.bollywoodmdb.com/movies/largethumb/250x267/2015/m-s-dhoni-the-untold-story/poster.jpg',
        trailer:'https://www.bollywoodmdb.com/movies/broadband/m-s-dhoni-the-untold-story-official-trailer-sushant-singh-rajput'
        },
        {
        movieName:'Detective Byomkesh Bakshy!',
        director:'Dibakar Banerjee',
        stars:'Sushant Singh Rajput , Anand Tiwari, Swastika Mukherjee',
        movierating:'*****',
        releaseDate:'03 April, 2015',
        bannerImg: 'https://cdn.bollywoodmdb.com/movies/largethumb/250x267/2014/detective-byomkesh-bakshi/poster.jpg',
        trailer:'https://www.bollywoodmdb.com/movies/broadband/2nd-official-trailer-of-detective-byomkesh-bakshy'
        },
        {
        movieName:'Pk',
        director:'Rajkumar Hirani',
        stars:'Aamir Khan , Anushka Sharma, Sushant Singh Rajput',
        movierating:'*****',
        releaseDate:'03 April, 2015',
        bannerImg: 'https://cdn.bollywoodmdb.com/movies/largethumb/250x267/2013/peekay/poster.jpg',
        trailer:'https://www.bollywoodmdb.com/movies/broadband/the-official-teaser-of-pk'
        },
        {
        movieName:'Shuddh Desi Romance',
        director:'Maneesh Sharma',
        stars:'Sushant Singh Rajput , Parineeti Chopra, Vaani Kapoor',
        movierating:'*****',
        releaseDate:'06 September, 2013',
        bannerImg: 'https://cdn.bollywoodmdb.com/movies/largethumb/250x267/2013/shuddh-desi-romance/poster.jpg',
        trailer:'https://www.bollywoodmdb.com/movies/broadband/the-official-trailer-of-shuddh-desi-romance'
        },
        {
        movieName:'Kai Po Che',
        director:'Abhishek Kapoor',
        stars:'Sushant Singh Rajput , Amit Sadh, Rajkummar Rao',
        movierating:'*****',
        releaseDate:'22 February, 2013',
        bannerImg: 'https://cdn.bollywoodmdb.com/movies/largethumb/250x267/2012/kai-po-che/poster.jpg',
        trailer:'https://www.bollywoodmdb.com/movies/broadband/kai-po-che-theatrical-trailere'
        }
    ];
}

movieList.css

h1{
    font-size: 40px;
}

Understanding Code Line by Line: movieList Component

Understanding code line by line of JavaScript

sushantMovies=[] :

Declare sushantMovie propery which is an array and it holds information about different movies like movieName, director,stars, releaseDate etc.

Understanding code line by line of HTML

<div class=”slds-grid slds-gutters”>

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

<div class=”slds-col slds-size_1-of-3″>

if we need 3 cards to horizontally align along the same x-axis, we will use the class slds-col slds-size_1-of-3 element. This will make each card take up 33.333% of containing section.

<img class=”logo” src=”” alt=”” />

The <img> tag is used to embed an image in an HTML page. The <img> tag creates a holding space for the referenced image.

The <img> tag has two required attributes:

src – Specifies the path to the image
alt – Specifies an alternate text for the image, if the image for some reason cannot be displayed

<div class=”slds-col slds-size_2-of-3 slds-p-top_xx-large” >

if we need 2 cards to horizontally align along the same x-axis, we will use the class slds-col slds-size_1-of-2 element.

I have adjusted white space by adding vertical padding.

<h1>Remembering Sushant Singh Rajput: 1986–2020</h1>

The <h1> to <h6>tags are used to define HTML headings. <h1> defines the most important heading. <h6> defines the least important heading. I am using <h1>

<div class=”slds-box slds-grid slds-gutters slds-wrap slds-align_absolute-center”>

If we want to use multiple slds classes then we can do so by putting space in between.

template for:each={sushantMovies} :

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

for:item=”movies”

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

c-movie-tile:

Here I want to exposes “sushantMovies” property. As movieList (parent component) contains c-movie-tile so it can call “sushantMovies” property.

key={movies.movieName}:

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

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 movieName as a key here. Therefore put as {movies.movieName}

sushant-movies={movies}:

sushant-movies is the property coming from movieTile (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 {movies}

class=”slds-col” :

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

Output