Tuesday, 19 December 2023

SetMethodParent Component

 SetMethodParent Component Html


<template>

<lightning-card  variant="Narrow"  title="Setter Method Demo" >

    <c-set-method-child detail = {userDetails}></c-set-method-child>

</lightning-card>

</template>


SetMethodParent Componentjs

import { LightningElement } from 'lwc';

export default class SetMethod extends LightningElement {

<-- user Details age multiple *2 use write code child component call to 

parent update age--> 

        userDetails = {

            name:"salesforcetroop",

            age:25

        }

}

setMethodChild Component Html

<template>

<lightning-card  variant="Narrow"  title="Hello" icon-name="standard:account">

    <p class="slds-p-horizontal_small"><strong>Name -{detail.name} </strong></p>

    <p class="slds-p-horizontal_small"><strong>Name -{detail.age} </strong></p>

</lightning-card>

</template>

setMethodChild Component Js

import { LightningElement,api } from 'lwc';

export default class SetMethodChild extends LightningElement {

  userDetail

 @api 

 get detail(){

     return this.userDetail

 }

 set detail(data){

 let newAge =  data.age*2

this.userDetail = {...data, age:newAge}

 }

}

No comments:

Post a Comment