Types of Events
- Parent to Child Event communication in Lightning web component
- Custom Event Communication in Lightning Web Component (Child to Parent )
- Publish Subscriber model in Lightning Web Component or LMS (Two components which doesn’t have a direct relation )
1) Parent to Child Event communication in LWC
childComp.html
<template>
Message Will Come here from Parent Component :- {Message}
</template>
childComp.js
import { LightningElement, track, api } from 'lwc';
export default class ChildComponent extends LightningElement {
@track Message;
@api
changeMessage(strString) {
this.Message = strString.toUpperCase();
}
}
ParentComponent.html
<template>
<lightning-card title="Parent to Child Demo">
<lightning-layout>
<lightning-layout-item flexibility="auto" padding="around-small" >
<lightning-input label="Enter the Message" onchange={handleChangeEvent}></lightning-input>
</lightning-layout-item>
<lightning-layout-item flexibility="auto" padding="around-small">
<c-child-Comp></c-child-Comp>
</lightning-layout-item>
</lightning-layout>
</lightning-card>
</template>
ParentComponent.js
import { LightningElement } from 'lwc';
export default class ParentComponent extends LightningElement {
handleChangeEvent(event){
this.template.querySelector('c-child-Comp').changeMessage(event.target.value);
}
}
2) Custom event communication in Lightning Web Component (Child to Parent)
childComp.html
<template>
<lightning-card title="Child Component">
<div class="slds-m-around_medium">
<lightning-input name="textVal" label="Enter Text" onchange={handleChange}></lightning-input>
</div>
</lightning-card>
</template>
childComp.js
import { LightningElement } from 'lwc';
export default class ChildComp extends LightningElement {
handleChange(event) {
const name = event.target.value;
const selectEvent = new CustomEvent('mycustomevent', {
detail: name
});
this.dispatchEvent(selectEvent);
}
}
ParentComponent.html
<template>
<div class="slds-m-around_medium">
Value From Child : {msg}
<c-child-comp onmycustomevent={handleCustomEvent}></c-child-comp>
</div>
</template>
ParentComponent.js
import { LightningElement , track } from 'lwc';
export default class ParentComponent extends LightningElement {
@track msg;
handleCustomEvent(event) {
const textVal = event.detail;
this.msg = textVal;
}
}
3)Publish Subscriber model in Lightning Web Component.
Application Events in aura become a Publish-Subscribe Pattern in Lightning web components. We use an library called pubsub to achieve the communication between two components which doesn’t have a direct relation to each other. This works like a typical publish subscribe model. Where an event is subscribed by a component and handled when another component which fires/publishes the event within the same scope.
Pubsub module support below three method
- Register
- UnRegister
- Fire
Follow below step for Pub Sub module
Step 1) import Pub Sub file from here.
Step 2) Register the Event
MyComponent.js
import { registerListener, unregisterAllListeners} from 'c/pubsub';
export default class MyComponent extends {
@track Message;
connectedCallback() {
registerListener('messageFromSpace', this.handleMessage, this);
}
handleMessage(myMessage) {
this.Message = myMessage;
//Add your code here
}
disconnectCallback() {
unregisterAllListeners(this);
}
}
Step 3) Fire the event
OtherComponent.js
import { fireEvent } from 'c/pubsub';
import { CurrentPageReference } from 'lightning/navigation';
export default class OtherComponent extends LightningElement {
@track myMessage;
@wire(CurrentPageReference) pageRef;
sendMessage() {
fireEvent(this.pageRef, 'messageFromSpace', this.myMessage);
}
}
Lightning Data Services Example
accountLdsForm.js
import { LightningElement, api } from 'lwc';
export default class AccountLdsForm extends LightningElement {
@api recordId = '001XXXXXXXXXXXXXXX'; // Replace with a valid Account Id
}
accountLdsForm.html
<template>
<lightning-card title="Account Edit Form (LDS)">
<lightning-record-edit-form
object-api-name="Account"
record-id={recordId}
onsuccess={handleSuccess}>
<lightning-messages></lightning-messages>
<lightning-input-field field-name="Name"></lightning-input-field>
<lightning-input-field field-name="Phone"></lightning-input-field>
<lightning-input-field field-name="Industry"></lightning-input-field>
<lightning-button type="submit" label="Save" class="slds-m-top_medium"></lightning-button>
</lightning-record-edit-form>
</lightning-card>
</template>
Comments
Post a Comment