Agenda
This blog will give us a brief about how can we use slots for filling the common requirement many times and give us an idea about how can we communicate between multiple components using events (mainly focuses on the child to parent communication). And we also implement base components to understand the functionality.
What we are going to do
In this blog, we create two buttons showing details of the record using the same slot (creates a dynamical slot)and we also see that how can we communicate through events from child to parent and gives the required commands.
Slots In lightning Web Components
A slot is a placeholder for markup that a parent component passes into a component’s body. Slots are part of the Web Component specification.
<div slot="footer">
<!--markup-->
</div>
<slot name="footer"></slot>
We add a slot to a component’s HTML file so a parent component can pass markup into the component
Example: Unnamed slots
<template>
<h1>Add content to slot</h1>
<div>
<slot></slot>
</div>
</template>
.
[Note: An unnamed slot is a placeholder for any markup that a parent component passes into the body of c-slot-demo.]
Example: Named slots
<slot name="firstName">Default first name</slot>
[Note: We can define named slots just by putting name=”<!--Name-->” inside the slot attribute. And this can only be placed by calling it using its name.]
A component can have zero or more slots.
Events in Lightning Web Component
Please refer to my previous blog for this.
Blog: Understanding Event
Creating a Generic Slot (Used to show details in a Lightning Modal):
HTML:
Here, we are using a lightning modal to show the details which are sent from the parent object and to discriminate between the header, body, and footer we named the slots accordingly.
The class and Header of the modal is defined by the API variable’s
[Note: To expose a public property, decorate a field with @api. Public properties define the API for a component.] which are getting values directly from the parent component.
JavaScript :
As discussed above, we are using API variables to define the class and header of the modal. And, handleClose() method is used to dispatch the event (Event Name: ‘close’) to the parent component. [To listen for events, use an HTML attribute with the syntax ‘oneventtype’, So, our event type is close we use ‘onclose’].
Parent Component which uses slot :
HTML Syntax
In the parent component, we are using 2 buttons (Show and Edit) to show a record data using the base component according to users input we call 2 lightning record forms (view and edit respectively). We are using boolean variables to handle the forms display. And in footer we are using a close button to close the modal directly from parent component.
And as discuss above, [To listen for events, use an HTML attribute with the syntax ‘oneventtype’, So, our event type is close we use ‘onclose’]
On Click of Show Button
We are making show variable true and using account record id and ‘lightning-record-view-form’ to display the record data.
On Click of Edit Button
We are making edit variable true and using account record id and ‘lightning-record-edit-form’ to display the record data.
JavaScript:
At JS level we are using accId which contains record id of a account and other boolean variables to handle the event accordingly. And handleClick() method handles the button click of(show and edit) and handleCancel() method handle the close event from both parent and child component.
Blog’s Conclusion:
So, this blog gives us a brief about how can we use a single slot to fullfill same looking different requirement and also how can we handle a child component from both parent and child component.
Great!!
ReplyDelete