Concepts or coding lessons of Salesforce that you can implement easily

Learn to Pass Parameter from Parent to Child in LWC

 Below is the example how to pass List from Parent component to Child component in LWC

contactListParent.html

<template>
    <lightning-card variant="Narrow" title="Contact List" icon-name="standard:contact">
        <template if:true={contacts}>
           <template for:each={contacts} for:item="con">
              <c-contact-tile-child contact={con} key={con.id}></c-contact-tile-child>
          </template>
        </template>
    </lightning-card>
</template>

contactListParent.js

import { LightningElement, track } from 'lwc';

export default class ContactListParent extends LightningElement {
    contacts = [
        {
            Id : 1,
            Name : "Sample1",
            Email : "test@test.com",
            Phone : '234234234'
        },
        {
            Id : 2,
            Name : "Sample2",
            Email : "test@test.com",
            Phone : '2222222222'
        },
        {
            Id : 3,
            Name : "Sample3",
            Email : "test@test.com",
            Phone : '333333333'
        }
    ]
}

contactTileChild.html

<template>
    <div>        
        {contact.Name} &nbsp; {contact.Email} &nbsp; {contact.Phone}
    </div>
</template>

contactTileChild.js

import { LightningElement, api } from 'lwc';

export default class ContactTileChild extends LightningElement {
    @api contact;
}

Subscribe blog for More updates !!! 


Read More: WhatsApp on Salesforce Integration in 5 Steps
                    Which Salesforce API Do I Use in Integration?
                    When To Use Salesforce REST API  
                   When To Use Salesforce SOAP API 
                   When To Use Salesforce Bulk API 


Latest Salesforce Interview Questions and Answers:

loading...

No comments:

Post a Comment