Monday, January 13, 2020

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

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


childcompdemo.html



<template>
    <div>
        <p>
        Hi, I am from child component HTML file.
       </p>
        <p>
        <b>Message from parent comp is </b> : {messagefromparent}
       </p>
       <p>
        <b>Name of parent comp is </b>: {parentcompname}
       </p>
    </div>
</template>      


childcompdemo.js



import { LightningElement, api } from 'lwc';

export default class Childcompdemo extends LightningElement {

    @api messagefromparent;
    @api parentcompname;

}


parentcompdemo.html



<template>
    <div>
        Hi, I am from parent component HTML file.
        <c-childcompdemo messagefromparent="Hi this message is from parent comp" parentcompname="parentcompdemo" ></c-childcompdemo>
    </div>
</template>



parentcompdemo.js



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

export default class Parentcompdemo extends LightningElement {

}


lightningapp.app



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


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

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

Wednesday, January 8, 2020

How to iterate over the list in lightning web components

How to iterate over list in lightning web components


This blog post will explain "How to iterate over list in lightning web components".


listdemolwc.html


<template>
    <lightning-card>
        <table class="slds-table slds-table_cell-buffer slds-table_bordered">
            <thead>
              <tr class="slds-line-height_reset">
                <th class="" scope="col">
                  <div class="slds-truncate" title="Key">Account Name</div>
                </th>
                <th class="" scope="col">
                  <div class="slds-truncate" title="Value">Account Description</div>
                </th>
            </tr>
        </thead>
        <tbody>
            <template for:each={accountsdata.data} for:item="item" for:index="index">
                <tr key={item.id}>
                    <th scope="col">
                     {item.Name}
                    </th>
                    <th scope="col">
                      {item.Description}
                    </th>
                </tr>
            </template>
        </tbody>
        </table>
    </lightning-card>
  </template>

listdemolwc.js


/* eslint-disable no-unused-vars */
/* eslint-disable no-alert */
/* eslint-disable no-console */
/* eslint-disable guard-for-in */

/* eslint-disable vars-on-top */

import { LightningElement, track, wire } from 'lwc';

import getDataFromApex from '@salesforce/apex/listapexcontroller.methodName';

export default class listdemolwc extends LightningElement {

@wire(getDataFromApex) accountsdata;

}

listapexcontroller.cls


public with sharing class listapexcontroller {
    @AuraEnabled(cacheable=true)
    public static list<Account> methodName(){

        list<Account> acclist=new list<Account>();
        acclist=[SELECT id,Name,Description from Account];
        return acclist;
    }
    public listapexcontroller() {

    }
}

lightningapp.app


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

How to Iterate over map with list as values in lightning web components

How to Iterate over map with list as values in lightning web components
This blog post will explain "How to Iterate over map with list as values in lightning web components".


mapdemolwc.html



<template>
    <lightning-card>
        <table class="slds-table slds-table_cell-buffer slds-table_bordered">
            <thead>
              <tr class="slds-line-height_reset">
                <th class="" scope="col">
                  <div class="slds-truncate" title="Key">Key</div>
                </th>
                <th class="" scope="col">
                  <div class="slds-truncate" title="Value">Value</div>
                </th>
            </tr>
        </thead>
        <tbody>
            <template for:each={mapkeyvaluestore} for:item="mapkey" for:index="index">
                <tr key={mapkey.key}>
                    <th scope="col">
                     {mapkey.key}
                    </th>
                    <th scope="col">
                    <template for:each={mapkey.value} for:item="mapval" for:index="index1">
                      <div key={mapval}>
                     
                        {mapval}
                     
                    </div>
                
                    </template>
                  </th>
                </tr>
            </template>
        </tbody>
        </table>
    </lightning-card>
</template>


mapdemolwc.js



/* eslint-disable no-console */
 /* eslint-disable guard-for-in */
/* eslint-disable vars-on-top */

import { LightningElement, track, wire } from 'lwc';
import getDataFromApex from '@salesforce/apex/mapkeyvalueapexcontroller.methodName';
export default class Mapdemolwc extends LightningElement {
@track mapkeyvaluestore=[];

@wire(getDataFromApex)
getResults(result){
if(result.data){
    for(var key in result.data){
     this.mapkeyvaluestore.push({key:key,value:result.data[key]});
    }
   

  }
  else{
    console.log('Some error occured');
  }

 }

}


mapkeyvalueapexcontroller.cls



public with sharing class mapkeyvalueapexcontroller {
    @AuraEnabled(cacheable=true)
    public static map<string,List<string>> methodName(){
        map<string,List<string>> mapkeyvaluestore=new map<string,List<string>>();
        mapkeyvaluestore.put('key1',new List<string>{'STORE1','STORE6'} );
        mapkeyvaluestore.put('key2',new List<string>{'STORE2','STORE7'});
        mapkeyvaluestore.put('key3',new List<string>{'STORE3','STORE8'});
        mapkeyvaluestore.put('key4',new List<string>{'STORE4','STORE9'});
        mapkeyvaluestore.put('key5',new List<string>{'STORE5','STORE10'});
        return mapkeyvaluestore;
    }
    public mapkeyvalueapexcontroller() {

    }
}

lightningapp.app



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