Chapter 20: Switch Bulb on and off using Lightning Web Component

In this Chapter we will learn how to switch bulb on and off using Lightning web component.

Topics Covered:

Parent to Child Communication in LWC
QuerySelector
Understanding Code Line By Line

Let’s get started…

child.html

<template>
<img src={imageSource} style="width:100px">
</template>

child.js

import { LightningElement, api } from 'lwc';

export default class Child extends LightningElement {
   @api imageSource;
      
    @api
    bulbOn(){
        this.template.querySelector('img').src="https://www.kindpng.com/picc/m/158-1583460_yellow-light-bulb-bulb-png-transparent-background-png.png";

    }
    @api
    bulbOff(){

        this.template.querySelector('img').src="https://www.vhv.rs/dpng/d/2-27579_transparent-transparent-background-light-bulb-hd-png-download.png";
    }
}

parent.html

<template>
 <h1>Turn on and off the light using Lightning Web Component</h1>
 <br/>
 <div class="slds-align_absolute-center">

<button onclick={handleBulbOn}>Turn on the light</button>

<c-child image-source={imgsrc}></c-child>

<button onclick={handleBulbOff}>Turn off the light</button>
</div>
</template>

parent.js

import { LightningElement } from 'lwc';

export default class Parent extends LightningElement {
 
imgsrc="https://www.vhv.rs/dpng/d/2-27579_transparent-transparent-background-light-bulb-hd-png-download.png";

  handleBulbOn(){
    this.template.querySelector('c-child').bulbOn();
  }
  handleBulbOff(){
    this.template.querySelector('c-child').bulbOff();
  }
}

parent.css

h1{
    font-size: 30px;
}

Understanding Code Line by Line:

child.html

<img src={imageSource} style="width:100px">

Created an image tag and dynamically added attribute by using braces.

child.js

import { LightningElement, api } from 'lwc';

Import api decorator from lwc module

@api imageSource;

Create a public property to use in parent component

@api
bulbOn(){
this.template.querySelector('img').src="https://www.kindpng.com/picc/m/158-1583460_yellow-light-bulb-bulb-png-transparent-background-png.png";
}

Created a public method to call from parent component. querySelector returns the first element that matches CSS selector, image in this case.

src- it is the source of image and i have added link i.e. on calling of this button use this image. This method is used to switch on the builb

@api
bulbOff(){
this.template.querySelector('img').src="https://www.vhv.rs/dpng/d/2-27579_transparent-transparent-background-light-bulb-hd-png-download.png";
}

Created a public method to expose in parent component. This method is used to switchOff the bulb.

Parent.html

<button onclick={handleBulbOn}>Turn on the light</button>

Created a button with onclick event handler. It invokes handleBulbOn method

<c-child image-source={imgsrc}></c-child>

The parent component contains c-child (child component) so it can use methods of child component. imgSrc it is property in the parent component so given in braces.

<button onclick={handleBulbOff}>Turn off the light</button>

Created a button with onclick event handler. It invokes handleBulbOff method.

Parent.js

imgsrc="https://www.vhv.rs/dpng/d/2-27579_transparent-transparent-background-light-bulb-hd-png-download.png";

This is the first image which is displayed to user on page load.

handleBulbOn(){
this.template.querySelector('c-child').bulbOn();
}

Clicking the button in parent component will change the image after I call the method in the child component.

Here, bulbOn() is the method in child component which is having logic to change image we are calling it from handleBulbOn() method of parent component

handleBulbOff(){
this.template.querySelector('c-child').bulbOff();
}

Clicking the button in parent component will change the image after I call the method in the child component.

Here, bulbOff() is the method in child component which is having logic to change image we are calling it from handleBulbOff() method of parent component.