madhavsethi

bmi-calculator.github.io

First-site

first-site-with-css

fries-fansite

hello-wold-react

LWC-BMI-Calculator

Getter used in this.

LWC-Checkbox-call-method-on-child-from-parent

We are going to check checkboxes in child component from parent.

LWC-Dispatching-Handling-events---Meeting-room

What we have learnt: 1. Pass data from Parent Component to Child Component using Public properties. 2. Call Method on child component from Parent Component. Now we'll learn how Child component can communicate back with Parent Component. We will do it by firing event from Child Component. Child component: meetingRoom When user clicks on tile (child component), we have to dispatch an event which will handled by Parent Component. The tile information has to passed. ------------------ Steps on Child Component: 1. On child component div, add a onclick handler : tileClickHandler() 2. On Child component, define method on js file. From here we will fire an event which will be handled by Parent Component. To fire event from lwc, we have to use "dispatch event method" Here tileclick is the event name, when we use it in parent, we have to use it as: on+tileclick = ontileclink! We will also pass payload to this which can be used by Parent Component to perform logic..{detail : this.meetingRoomInfo} Now, to fire the event, we will use: this.dispatchEvent(tileClicked) tileClickHandler(){ const tileClicked = new CustomEvent('tileclick', {detail : this.meetingRoomInfo, bubbles :true}); this.dispatchEvent(tileClicked); } --------------- Parent Component: Now we will define Handler on Parent Component. We can do it by Child Component tag: by using ontileclick. <c-meeting-room meeting-rrom-info={room} show-room-info ontileclick={onTileSelectHandler}></c-meeting-room> Now this will be method in js file: onTileSelectHandler onTileSelectHandler(event){ const meetingRoomInfo = event.detail; selectedMeetingRoom = meetingRoomInfo.roomName; } Now on html file... We ware using the property "selectedMeetingRoom" -------------- Another approach: programmatic approach. 1. Remove handler from the <c-meeting-room> 2. Go to js file. 3. Define Handler for event... in our case we want it at the time of component creation. 4. So, we will define a constructor method... First statement will be super(); 5. Define Handler: this.template.addEventListner('tileclick', this.onTileSelectHandler.bind) [First parameter is the event name(on keyword not required), second is to bind the event Handler] 6. Add bubble property to child.

LWC-MeetingRoom-Slot

Slots used to pass markup(Lightning Tile) from Parent component to Child component. Parent component: meetingRooms Child:meetingRoom Slots are of 2 types: named and unnamed. In parent it is used as attribute, while in child it is used as a tab.

LWC-Public-Properties-Meeting-Rooms

We have 2 LWC components: Parent component is meetingRooms, Child Component is meetingRoom.

madhavsethi/bmi-calculator.github.io

madhavsethi/First-site

madhavsethi/first-site-with-css

madhavsethi/fries-fansite

madhavsethi/hello-wold-react

madhavsethi/LWC-BMI-Calculator

Getter used in this.

madhavsethi/LWC-Checkbox-call-method-on-child-from-parent

We are going to check checkboxes in child component from parent.

madhavsethi/LWC-Dispatching-Handling-events---Meeting-room

What we have learnt: 1. Pass data from Parent Component to Child Component using Public properties. 2. Call Method on child component from Parent Component. Now we'll learn how Child component can communicate back with Parent Component. We will do it by firing event from Child Component. Child component: meetingRoom When user clicks on tile (child component), we have to dispatch an event which will handled by Parent Component. The tile information has to passed. ------------------ Steps on Child Component: 1. On child component div, add a onclick handler : tileClickHandler() 2. On Child component, define method on js file. From here we will fire an event which will be handled by Parent Component. To fire event from lwc, we have to use "dispatch event method" Here tileclick is the event name, when we use it in parent, we have to use it as: on+tileclick = ontileclink! We will also pass payload to this which can be used by Parent Component to perform logic..{detail : this.meetingRoomInfo} Now, to fire the event, we will use: this.dispatchEvent(tileClicked) tileClickHandler(){ const tileClicked = new CustomEvent('tileclick', {detail : this.meetingRoomInfo, bubbles :true}); this.dispatchEvent(tileClicked); } --------------- Parent Component: Now we will define Handler on Parent Component. We can do it by Child Component tag: by using ontileclick. <c-meeting-room meeting-rrom-info={room} show-room-info ontileclick={onTileSelectHandler}></c-meeting-room> Now this will be method in js file: onTileSelectHandler onTileSelectHandler(event){ const meetingRoomInfo = event.detail; selectedMeetingRoom = meetingRoomInfo.roomName; } Now on html file... We ware using the property "selectedMeetingRoom" -------------- Another approach: programmatic approach. 1. Remove handler from the <c-meeting-room> 2. Go to js file. 3. Define Handler for event... in our case we want it at the time of component creation. 4. So, we will define a constructor method... First statement will be super(); 5. Define Handler: this.template.addEventListner('tileclick', this.onTileSelectHandler.bind) [First parameter is the event name(on keyword not required), second is to bind the event Handler] 6. Add bubble property to child.

madhavsethi/LWC-MeetingRoom-Slot

Slots used to pass markup(Lightning Tile) from Parent component to Child component. Parent component: meetingRooms Child:meetingRoom Slots are of 2 types: named and unnamed. In parent it is used as attribute, while in child it is used as a tab.

madhavsethi/LWC-Public-Properties-Meeting-Rooms

We have 2 LWC components: Parent component is meetingRooms, Child Component is meetingRoom.

madhavsethi/LWC-Simple-Calculator

madhavsethi/madhav-resume

madhavsethi/mortgage_calculator

madhavsethi/My-first-site

madhavsethi/Story

madhavsethi/string-reverse

madhavsethi/Stylised-Personal-Site

madhavsethi/TinDog