Sunday, January 12, 2020

How to pass data from child component to parent component in lightning web component

In this blog post, we will learn "How to pass data from child component to parent component in lightning web component".

childcompdemo.html


In the child component HTML file, we are firing event based on button click.


<template>
    <div>
        Hi, I am from child component HTML file.
        <lightning-button label="Click Me To Fire Event" onclick={handlebuttonclick}></lightning-button>
    </div>
</template>



childcompdemo.js


In the child comp js file, we are passing childcompname and childcompdescription property to parent component.

import { LightningElement, api } from 'lwc';

export default class Childcompdemo extends LightningElement {

    @api childcompname='Name of comp is childemocomp';
    @api childcompdescription='Description of comp is testing';
    handlebuttonclick(){
       const evt= new CustomEvent('myfirstevent', {detail:{childcompname:this.childcompname,childcompdescription:this.childcompdescription}});
       this.dispatchEvent(evt);
    }
}


parentcompdemo.html


In the parent component HTML file, we are handling the child comp event.

The keyword "on" is appended before the name of the event using which it is fired.

In this example, we have fired the event from the child component using the name "myfirstevent".

<template>
    <div>
        Hi, I am from parent component HTML file.
        <c-childcompdemo onmyfirstevent={handlechildevent}></c-childcompdemo>
    </div>
</template>


parentcompdemo.js


/* eslint-disable no-alert */
import { LightningElement } from 'lwc';

export default class Parentcompdemo extends LightningElement {

    handlechildevent(event){
      const childcompname=event.detail.childcompname;
      const childcompdescription=event.detail.childcompdescription;
      alert('Event handled in Parent Comp');
      alert('child comp name is:'+childcompname);
      alert('child comp description is:'+childcompdescription);
    }
}


lightningapp.app


<aura:application extends="force:slds">
<c:parentcompdemo></c:parentcompdemo>
</aura:application>       


How to pass data from child component to parent component in lightning web component

child to parent communication in lwc

child to parent communication in lwc

pass data from child to parent lwc

No comments:

Post a Comment