Tuesday, 19 December 2023

Child To Parent Data Passing Value

Chtil to Parent Passing Data Apex 

public class DisplayAccountRecords{

public static list<account> getAccountRecords(){

return [select id,name,phone from account];

}

}

Childaccountinsertrecord  Js Component Name

import { LightningElement  } from 'lwc';

import getrecords from '@salesforce/apex/DisplayRecords.getAccountRecords';

export default class ChildaccountinsertComponent extends LightningElement {

@wire(getrecords)

wirdata({data,error}){

if(data){

 const childcomponentdata = new CustomEvent('dataready',{detail:data});

  this.dispatchEvent(childcomponentdata);

} else if(error){

console.log('Error feacting data from Apex:'+error);

}

}

}

Childaccountinsertrecord  Js Component Name

import { LightningElement  } from 'lwc';

import getrecords from '@salesforce/apex/DisplayRecords.getdisplayedrecords';

export default class ChildaccountinsertComponent extends LightningElement {

@wire(getrecords)

wirdata({data,error}){

if(data){

 const childcomponentdata = new CustomEvent('dataready',{detail:data});

  this.dispatchEvent(childcomponentdata);

} else if(error){

console.log('Error feacting data from Apex:'+error);

}

}

}

childaccountinsertrecord  html Component Name

<template>

<!- I can not   displayed  any data ->

</template>

Parentaccountinsertrecord Js Component Name

import { LightningElement  } from 'lwc';

export default class ParentaccountinsertComponent extends LightningElement {

receivedData

handleDataReady(event){

this.receivedData = event.detail

}

}

Parentaccountinsertrecord html Component Name

<template>

<lightning-card  title= "Parent Comonent">

<div>

<c-childaccountinsertrecord  ondataready = {handleDataReady}></c-childaccountinsertrecord>

</div>

<template if:true={receivedData}>

<template for:each={receivedData} for:item={acc}>

  <li> Account ID :- {acc.id} </li>

  <li> Account Name :- {acc.Name} </li>

  <li> Account Phone :- {acc.Phone} </li>

</template>

</lightning-card>

</template>

No comments:

Post a Comment