Communicate b/w Parent-Child Component using LWC

    What is Event in LWC?

• Events in Lightning web components are built on DOM Events, a collection of APIs and objects available in every browser.
• Lightning web components dispatch standard DOM events.

Some different types of web events :

• Mouse event : example - mousedown, mouseup, click, dblclick
• Touch event: example - touchstart, touchmove
• Keyboard event : example -keydown, keypress, keyup
• Form event: example -focus, blur, change, submit
• Window event :example - scroll, resize, hashchange, load, unload

Let us discuss here how to use the lightning web component events to communicate between components.

How to  create events, using the CustomEvent interface and dispatch an event in lwc?

To create an event, use the CustomEvent() constructor.

 Example  : this.dispatchEvent(new CustomEvent('myTxt'));

 Note : CustomEvent constructor has one required parameter which is string that denotes event type.

 To dispatch an event, call the EventTarget.dispatchEvent() method.
where EventTarget is a DOM interface implemented by objects that can receive events and may have listeners for them.

• EventTarget.addEventListener()

        Registers an event handler of a specific event type on the EventTarget.

• EventTarget.removeEventListener()

         Removes an event listener from the EventTarget.

• EventTarget.dispatchEvent()

       Dispatches an event to this EventTarget

Here is my sample lwc receipe. It divided into 3 sections: 

1. Basic form to add the contact detail (on adding the record it will refresh the contact list records)
2. Show the list of contact records
3. Show the contact details.

 Basically in the receipe I have created 2 main component and apex class(Parent - child).
1. ContactListContainer - this is my parent component.
2. Add contact and contactList is my child component.
3. Apex class
Here I will add the contact detail in the list of contact records without refreshing the page(Using refreshApex here) and on clicking the contact record it will further show the contact full detail.

Check the video of this sample recipe. Its time to code in lwc :

contactListContainer.html
contactListContainer.js

contactListContainer.js-meta.xml

addContact.html
addContact.js
addContact.js-meta.xml

contactList.html
contactList.js
contactList.js-meta.xml

Apex Class: addNewContact.cls

Happy Learning :) .Please share your views and suggestions.