Lightning Web Component

 Lightning Web Component

Data Binding:

    Ref Link: 

https://developer.salesforce.com/docs/platform/lwc/guide/js-props-getter.html

HTML:

<template>

<lightning-card title="Data binding">

<p class="slds-p-horizontal_small">

welcome to {message}

</p>

<lightning-input label="Name" value={message} onchange={handleChange}></lightning-input>

</lightning-card>

</template>

JS:

import { LightningElement } from 'lwc';

export default class DataBinding extends LightningElement {

message="Lightning Web Component";

handleChange(event){

this.message=event.target.value;

}

}

XML:

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

<apiVersion>61.0</apiVersion>

<isExposed>true</isExposed>

<targets>

<target>lightning__AppPage</target>

<target>lightning__HomePage</target>

<target>lightning__RecordPage</target>

</targets>

</LightningComponentBundle>

Output

getterexample component:

HTML:

<template>

<lightning-card title="Getter Example">

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

<lightning-input name="firstName" label="First Name" onchange={handleChange}

></lightning-input>

<lightning-input name="lastName" label="Last Name" onchange={handleChange}></lightning-input>

<p class="slds-m-top_medium">Uppercased Full Name: {uppercasedFullName}</p>

</div>

</lightning-card>

</template>

JS:

import { LightningElement } from 'lwc';

export default class GetterExample extends LightningElement {

firstName = " ";

lastName = " ";

handleChange(event) {

const field = event.target.name;

if (field === "firstName") {

this.firstName = event.target.value;

} else if (field === "lastName") {

this.lastName = event.target.value;

}

}

get uppercasedFullName() {

console.log("**FirstName "+this.firstName);

console.log("**LastNAme "+this.lastName);

return `${this.firstName} ${this.lastName}`.toUpperCase();

}

}

XML

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

<apiVersion>61.0</apiVersion>

<isExposed>true</isExposed>

<targets>

<target>lightning__AppPage</target>

<target>lightning__HomePage</target>

<target>lightning__RecordPage</target>

</targets>

</LightningComponentBundle>

Output:

Communication using events

Events in LWC

• Browser Events

• Simple Event

• Bubble Event

• Composed Event

• Pub Sub

https://github.com/trailheadapps

Dreamhouse App

https://trailhead.salesforce.com/content/learn/projects/quick-start-dreamhouse-sample-app

https://github.com/trailheadapps/dreamhouse-lwc

https://trailhead.salesforce.com/content/learn/projects/get-started-with-salesforce-development?trailmix_creator_id=sampatharjunan&trailmix_slug=dev-day-1-salesforce-overview