Component Composition In Salesforce Lightning Web Component (LWC)

Component Composition In LWC

Hey Kid !! Welcome back ⚡️In the last EPISODE we discussed the cool way of conditional rendering in salesforce lightning web component by demonstrating the running car based on the toggle switch.

In this EPISODE, we will discuss the component composition in LWC along with the cool demonstration.

Let's begin...

Before moving to the actual scenario let's understand what exactly component composition means.

WHAT IS COMPONENT COMPOSITION ?

Composition : Let's consider an example of Car, we all know Car is a product which consists of a car wheel, car body, car glasses etc. Now they all are manufactured or created in a different company.

Similarly, In our lightning application, we create such small-small reusable components separately and install them (compose them) inside another component. this concept is called as component composition.

Now, the obvious question is why to use other components inside the main component ?

So there are many advantages to this Like:

- No need to re-write the code again.

- Easy to call other components.

- Reduce code size.

Now let's understand how we can create a composition in the lightning web component. Basic Idea is we create the main component (parent component) and call other reusable child components inside main component.

A basic structure is like this :

-----------------------------------------

< Parent Component >

    <Child Component 1>

    <Child Compoenent 2>

     ........

</Parent Component >

-----------------------------------------

As you can see in the above structure how we can include the child components in the parent component.

Now's let understand the syntax in the Lightning web component :

SYNTAX : 

parentComponent.html

-----------------------------------------

<template>

 <p>I am inside Parent Component</p>

  <br/>

<!-- below is child compoenent-->

 <c-child-component></c-child-component>

</template>

-----------------------------------------

In the above syntax as you can see we have just included a couple of words inside a paragraph tag.

Then below that, we have included the child component inside as a markup.

IMPORTANT: When we call child component inside the parent component we use kabab case to represent the name of it.

Hence as our component name is childComponent, we have written it starting with <c- this is a default namespace. After this, If we use camel case like oneTwo we write it in kabab case format as one-two. 

Hence we called the child component as <c-child-component> in the above parent syntax.

childComponent.html

-----------------------------------------

<template>

   <p>I am inside Child Component</p>

</templete>

-----------------------------------------

Above snippet is just a simple child component with some couple of word inside the paragraph tag.

OUTPUT

-----------------------------------------

I am inside Parent Component 

I am inside Child Component

-----------------------------------------

And finally, when we preview the above parent component we can see both parent and child component data together as we composed them together.

This is how we do component composition in salesforce lightning web component.

It was simple right ??

Now let's create something creative composition of the components like this :

-----------------------------------------

-----------------------------------------

Excited right ?? They are moving too 😁. So In the above snap, you can see there are three character Bat (Spreading Virus), Doctor who is saving Child from the bat spreading virus.

I picked up this idea as currently, Carona virus is trending nowadays hence I would like to demonstrate with this simple example of how doctors are fighting with the virus and saving us.

So let's begin......

COMPONENT 1 : So We are going to create the main component which consists of some titles and characters of doctor and bat.

COMPONENT 2 : In the second component we are going to include the small kid walking.

So that when we preview the Component 1 then we can see three of the characters on the same screen. I hope the idea is clear now for this composition.

So let's do it.......

STEP 1 :

Jump into the VS code and connect your salesforce org by Autorize an Org and complete the authorization process.

STEP 2 : 

Now let's create a new Lightning web component called lwcComponentCompositionParent.

Write the code as :

lwcComponentCompositionParent.html

-----------------------------------------

<template>

<p class="title"> LWC Component Composition</p>

<p class="go">Go!! CARONA Go!!</p>

<div>

<!-- Below is Parent component Images-->

<div class="doctor">

<img src="https://media.giphy.com/media/WsRFo5SaNEsHo0e5tk/giphy.gif" />

</div>

<div class="carona">

<img src="https://media.giphy.com/media/uMMZyNy2ztDqg/giphy.gif" />

</div>

<!-- Below is child component Image-->

<c-lwc-component-composition-child></c-lwc-component-composition-child>

</div>

</template>

-----------------------------------------

As you can see we have used the same pattern as per the syntax. Where we have added the two labels at the top and then two images (Bat and Doctor) and we have included the child component down there in kabab case 

<c-lwc-component-composition-child>

Perfect right??

Let's have a look at the styling CSS provided to these images and the animation we provided it to.

Create a file under the same component hierarchy called lwcComponentCompositionParent.css and write down the below code for styling.

lwcComponentCompositionParent.css

-----------------------------------------

.title{

position: absolute;

right: 30%;

left:35%;

bottom: 30%;

top: 5%;

font-size: 20px;

font-family: sans-serif;

}

.go{

position: absolute;

right: 30%;

left:40%;

bottom: 30%;

top: 15%;

font-size: 20px;

font-family: sans-serif;

color: red;

}

.doctor img{

height: 200px ;

position: absolute;

animation: jump 8s infinite;

animation-direction: normal;

padding-bottom: 2em;

}

.carona img {

padding-left: 20px;

height: 130px;

margin-right: 500px;

position: absolute;

animation: bat 7s infinite;

animation-direction: normal;

padding-bottom: 2em;

}

@keyframes bat {

0% {

top: 0;

left: 0;

}

25% {

top: 100px;

left: 20%;

}

50% {

top: 0px;

left: 40%;

}

75% {

top: 100px;

left: 60%;

}

100% {

top: 0px;

left: 80%;

}

}

-----------------------------------------

In the above code, I used the styling to adjust the bat and doctor characters and to animate the keyframes from it.

NOTE: we don't need change .js file here as we are just composing two-component.

if you want to learn about the basic of styling please refer w3schools website.

let's move ahead and we need to create the child component to add that small kid.

STEP 3 :

Create new lightning web component in vs code called as lwcComponentCompositionChild.

And follow the code as below :

lwcComponentCompositionChild.html

-----------------------------------------

<template>

<div class="kid">

<img src="https://media.giphy.com/media/eerNJ3Dul0cphE6dtO/giphy.gif" />

</div>

</template>

-----------------------------------------

As you can see it's a simple kid image added to the template. Now let's animate this kid to baby walk on the ground.

For that, we need to create the CSS file in the same lightning component inside the VS Code as below 

lwcComponentCompositionChild.css

-----------------------------------------

.kid img{

padding-top: 2em;

height: 150px;

position: absolute;

animation: walk 10s infinite;

animation-direction: normal;

}

@keyframes walk{

0% {

left: 0;

}

25% {

left: 20%;

}

50% {

left: 40%;

}

75% {

left: 60%;

}

100% {

left: 80%;

}

}

-----------------------------------------

In the above CSS code we have set the position and animation keyframe for animation. 

As we have called this above component inside the parent or main component we will preview the output for the parent component.

STEP 4 :

For a preview, you can deploy it to the source org by right-clicking and then add into a lightning application or use salesforce local development to preview it locally on your machine.

I love local development as we discussed this in the last Episode of this series. Check the steps in the first episode of this series.

Hence once you setup local development just right click on your component and select SFDX: Preview Component Locally

You here is the OUTPUT :

-----------------------------------------

-----------------------------------------

Coooool !! Right .....As you can see our doctor is saving the kid from the Virus of a bat.

In this cool way, we can use component composition and include as many as re-usable components in salesforce lightning web component.

I hope you are enjoying this series kid 😊.

In the next EPISODE, we will discuss How to pass value from Parent To Child Component in Lightning Web Component.

WOHOOO !! YOU HAVE JUST COMPLETED COMPONENT COMPOSITION IN LIGHTNING WEB COMPONENT (LWC) EPISODE
If you like this salesforcekid learning platform please let me know in the Comment section...Also, Share with your salesforce folks wish you all
Happy Learning ☁️⚡️ (Learn. Help. Share.) 😊 

<< PREVIOUS                               NEXT >>