Tuesday, 19 December 2023

Calling child method from parent

 Callingchildmethodfromparent Html

<template>

<lightning-button variant="base" label="Reset Silder"  onclick={handleClick}></lightning-button>

<div class="slds-var-m-bottom_medium">

    <c-parenttochildslidercomponent></c-parenttochildslidercomponent>

</div>

</template>

Callingchildmethodfromparent JS

import { LightningElement,api } from 'lwc';

export default class Parenttochild extends LightningElement {

  handleClick(){

      this.template.querySelector('c-parenttochildslidercomponent').resetslider()

  }

}

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

Parenttochildslidercomponent html

<template>

<lightning-card    title="Calling child method from parent" >

<div class="slds-var-m-around_medium">

<lightning-slider label="Volume" value={val} onkeyup={changeHandler}></lightning-slider> 

</div>  

</lightning-card>

</template>

Parenttochildslidercomponent Js

import { LightningElement,api } from 'lwc';

export default class Parenttochildslidercomponent extends LightningElement {

 val = 20 

 changeHandler(event){

     this.val = event.target.value

 }

  @api resetslider(){

      this.val = 30

  }

}

No comments:

Post a Comment