Lesson: 32 | Communicate from Parent to Child

Child Component

HTML

<template>
    Message in Upper Case :{message}
</template>

JavaScript

import { LightningElement,track,api } from 'lwc';

export default class ToUppercase extends LightningElement {
  @track message;

  @api
  changeMessage(strString)
  {
      this.message=strString.toUpperCase();
  }
}

Parent Component

HTML

<template>
    <lightning-card title="Parent to Child">
        <lightning-layout>
            <lightning-layout-item flexibility="auto" padding="around-small">
                <lightning-input label="Enter the message" onchange={handler}></lightning-input>

            </lightning-layout-item>    
            <lightning-layout-item flexibility="auto" padding="around-small">
                    <c-to-uppercase></c-to-uppercase>
            </lightning-layout-item>

        </lightning-layout>


    </lightning-card>
</template>

JavaScript

import { LightningElement } from 'lwc';

export default class MainComp extends LightningElement {
    handler(event)
    {
        this.template.querySelector('c-to-uppercase').changeMessage(event.target.value);
    }

}

Prev You need to login to have access to the quizzes. Next

Mastered by 7 users.

Lightning Web Components

A. Component Reference (27 lessons)

B. Lightning Web Components | Utilities (11 lessons)

C. Lightning Web Component Guide (41 lessons)

D. Java Script Methods for LWC (23 lessons)

E. HTML (18 lessons)

F. JavaScript (19 lessons)

Go to top

Lesson: 32 | Communicate from Parent to Child

Child Component

HTML

JavaScript

Video

Parent Component

HTML

JavaScript

Video

Lightning Web Components

Login to your account

Lesson: 32 | Communicate from Parent to Child

Child Component

HTML

Parent Component

HTML

Lightning Web Components