Lightning Web Component

Decorators : ‹ › In LWC decorators are used to add functionality to a property or function. There are three types of decorators : 1. @track 2. @api 3. @wire @track : It is used to make properties or methods in LWC is private. This properties is not accessible outside the LWC in which it is declared. @api : It is used to make properties or methods in LWC is public. This way they are accessible outside of the component in which they are declared. For ex : parent component can set the value of the properties in the child component. @wire : It is used to read the Salesforce data from apex class into LWC. It is generally used while making the server call to apex class. LWC Properties : There are two type of LWC properties. 1. Reactive Properties 2. Non-Reactive Properties Reactive Properties : In case of reactive properties , value of the properties change when the component re-render. There are two types of Reactive Properties. 1. Public properties  -

Requirement : ‹ › LWC Life Cycle : Life Cycle is nothing but a callback method which is triggered at a specific phase of a component's lifecycle. LWC lifecycle contains the following phases: 1. constructor() 2. connectedCallback() 3. disconnectedCallback() 4. render() 5.renderedCallback() 6. errorCallback(error,stack) 1. constructor(): constructor is invoked when the component is created, it is similar to Init method in aura component. Only difference here is that, flow is from Parent to Child, and opposite to that of Init where child component Init is called first then the parent component Init gets called. First Statement must be super() with no parameters. It is required to assign the proper prototype and value to this attribute. 2. connectedCallback(): connectedCallback() is invoked when the component is inserted into DOM. 3. disconnectedCallback(): disconnectedCallback() is invoked when the component is removed from DOM. 4. render(): render(

Requirement : ‹ › Create a LWC in which get the contact records in Datatable and Update single record. Or in other words Update Single Record through Datatable. cmpDatatableUpdateSingleRecord.html < template >           < lightning-card   title = "Update Contact Record"   icon-name = "custom:custom63" >          < div   class = "slds-m-around_medium" >              < template   if:true = {contact.data} >                  < lightning-datatable                      key-field = "Id"                      data = {contact.data}                      columns = {columns}                      draft-values = {draftValues}                           onsave = {handleSave} > </ lightning-datatable >              </ template >          </ div >      </ lightning-card > </ template > cmpDatatableUpdateSingleRecord.js import  {  LightningElement , track , wire  }  from

Requirement : ‹ › Create a LWC to open Model Popup. Or in other words On button click open Model PopUp. cmpShowModelPopUp.html < template >      < lightning-card            title = "LWC Model"            icon-name = "custom:custom2" >          < div   class = "slds-theme_default" >              < div   class = "slds-p-around_medium" >                  < lightning-button                        label = "Show LWC Modal"   variant = "brand"                        onclick = {handleOpenModal} >                  </ lightning-button >              </ div >              < template   if:true = {isOpenModal} >                  < div   style = "height: 500px;" >                      < section   role = "dialog"                            tabindex = "-1"                            aria-labelledby = "modal-heading-01"        

Requirement : ‹ › Setup LWC Development Environment  1. VS (Visual Stdio) Code 2. Salesforce CLI Download and install the latest version of  Visual Studio Code . Open the Visual Studio Code and add extensions by clicking on the extensions icon present on the left side of the VS code editor. Search for  Salesforce Extension Pack  and install the extension. After that install  Lightning Web Components extension. Once you done with installing the above two extensions Re-launch the VS code editor. Now it’s time to check that our environment is ready for creating Lightning Web Components by pressing  Command + Shift + P  on  macOS or Ctrl + Shift + P  on Windows and type  sfdx . Hola..!! you are now ready to create your Lightning Web Components. Creating SFDX Project First create a folder somewhere on your machine and name it  trailblazer  or anything of your choice. Navigate to that folder from VS code editor by File > Open > trailblazer folder > Open Now