Posts

Showing posts from August, 2019

Communication between LWC components

Image
Today, we will see how to communicate between the LWC components. We will cover parent to child component communication and vice versa. We will see the various ways in which we can communicate between aura components and then we will compare it with the ways available to communicate between LWC components. A side by side comparison will help to have a better understanding of how things work in LWC. Aura Components LWC Communication from the parent component to the child component 1. Passing attributes: We can pass attribute from parent component to child component. The binding between attributes can be one-way binding or two-way binding.  1. Public property: Creating a public property in the child component and passing the value from the parent component. Public property is reactive in nature. 2. Aura method: Define an aura method in the child component and call it from the parent component. Aura methods cannot return a value. 2. Public method: Create a public metho

Building simple LWC components - Part 1

Image
In this series, we will learn how to create simple LWC components without writing any apex code. There are various ways provided by Salesforce to fetch data from the database without the developer requiring to write even a single line of Apex. In this blog, we will have a look at wire service to retrieve data from the server. LWC uses a reactive wire service that is built on Lightning Data Service. Components use @wire annotation in the JS class file to read data from one of the wire adapters in lightning/ui*Api modules. We will build a simple LWC component that will get the account record id from the Account record page and fetch the account data using wire service. The account details will be displayed in a header component styled using SLDS. We will also use the lightning-map component to show the account address on the google map. Below is the HTML markup for the LWC component accountInfo.html <template>   <div class="slds-page-header">     <div