Lightning Web Component

Lightning web Component :
=========================

ex 1 :


<template>
  <lightning-card title="Hello" icon-name="custom:custom14">
    <div class="slds-m-around_medium">
       Hello {greeting} !
    </div>
 
  </lightning-card>

</template>

import { LightningElement } from 'lwc';

export default class Hello extends LightningElement {
     greeting ='world';
}

ex 2 :
=========

<div class ="slds-m-around_medium">
     <p> Hello ,{greeting}
    <lightning-input label="Name" value={greeting} onchange={handleChange}><lightning-input>

</div>

import { LightningElement,track } from 'lwc';

export default class HelloBinding extends LightningElement {
  @track greeting ='world';

 handleChange (event){
   this.greeting = event.target.value;
 }

}

@track :
========

@track is going to notice that the state
changed.

To track a private property's value and
re-render a component when it changes,
decorate the property with @track.
Tracked properties are also called private
reactive properties.

Kabab style :
===============
kebab style is instead of CamelCase or
underscores, we're using hyphen between
the words in the variable.

@api :
=========
To expose a public property,decorate
it with @api.

public properties are reactive.
if the value of reactive property
changes, the component's template
rerenders any content that references
the property.

import {LightningElement,api} from 'lwc';

export default class Hello extends LightningElement
{
  @api greeting = 'world';
}

import :
=========
import allows us to pull in information
from other modules,like functions and
properties and access to them , and then
the export is what our module's going
to give to the world.

@wire :
=======
To read Salesforce data, Lightning web
components use a reactive wire service.
when the wire service provisions data,
the component rerenders.

Components use @wire in their javascript
class to specify a wire adaptor or an
apex method.

ex 3 :

Use Getters Instead of Expressions :
===================================

To compute a value for a property, use a
javascript getter.

<lightning-input name='firstName' label="First Name" onchange={handleChange}></lightning-input>
<lightning-input name='lastName' label='Last Name' onchnage={handleChange}></lightning-input>
<p class="slds-m-top_medium"> Uppercased Full Name : {uppercasedFullName} </p>

import { LightningElement , track } from 'lwc';

export default class HelloExpressions extends LightningElement {
  @track firstName ='';
  @track lastName ='';

 handleChange(event){
    const field = event.target.name;
      if(field == 'firstName'){
           this.firstname = event.target.value;
       } else if(field == 'lastName'){
           this.lastName = event.target.value;
        }
  }

 get uppercaseFullName(){
      return `${this.firstName} ${this.lastName}`.toUpperCase();
  }

}

Note : decorating a property with @track
makes it private and reactive. To mark a
property public and reactive, use @api.


Iteration and Directives :
===========================
To render a list of items, use for each
directive or the iterator directive to
iterate over an array.

ex 4 :

 <template for:each={contacts} for:item="contact">
   <li key={contact.Id}>
        {contact.Name},{contact.Title}
    </li>
 </template>

import { LightningElement } from 'lwc'

export default class HelloForEach extends LightningElement{

   contacts = [
      {
        Id : '5785637567',
        Name : 'test 1',
        Title : 'Enggineering',
      },
      {
        Id : '5785637568',
        Name : 'test 2',
        Title : 'Sales',
      },
      {
        Id : '5785637566',
        Name : 'test 3',
        Title : 'CEO',
      },
   ];
}

Conditional Rendering :
========================

<lightning-input type="checkbox" label="Show details"
onchange={handleChange}></lightning-input>

<div class="slds-m-vertical_medium">
  <template if:true={areDetailsVisible}>
    These are the details !
  </template>
  <template if:false={areDetailsVisible}>
    Not showing details.
  </template>
</div>

imort {LightningElement,track} from 'lwc';

export default class HelloConditionalRendering extends LightningElement {
   @track areDetailsVisible = false;

 handleChange(event){
     this.areDetailsVisible = event.target.checked;
  }

}

Accessing server Data in LWC with Lightning Data service:
=========================================================

1.Lightning-record-edit-form



a.Display a record edit layout for editing
a specified records.
b.Display a record create the layout for
creating a new record.

ex :

<lightning-record-edit-form
object-api-name={objectApiName}
record-id={recordId}>

<lightning-messages></lightning-messages>
<lightning-input-field field-name={nameField}></lightning-input-field>
<lightning-input-field field-name={titleField}></lightning-input-field>
<lightning-input-field field-name ={phoneField}></lightning-input-field>
<lightning-input-field field-name={emailField}></lightning-input-field>
<div class="slds-m-top_medium">
 <lightning-button variant="brand" type="submit" name="save" label="save"></lightning-button>
</div>

</lightning-record-edit-form>

import { LightningElement,api } from 'lwc';

import NAME_FIELD from '@salesforce/schema/Contact.Name';
import TITLE_FIELD from '@salesforce/schema/Contact.Title';
import PHONE_FIELD from '@salesforce/schema/Contact.Phone';
import EMAIL_FIELD from '@salesforce/schema/Contact.Email';

export default class RecordEditFormStaticContact extends LightningElement{
   
    nameField = NAME_FIELD;
    titleField = TITLE_FIELD;
    phoneField = PHONE_FIELD;
    emailField = EMAIL_FIELD;

  @api recordId;
  @api objectApiName;

}

Note : if you try to delete a field,they'll
get an error because they see the dependency
because it's static,and if they rename
the field,Salesforce will rewrite your code.


ex: apex wire method to property

<template if:true={contacts.data}>
 <template for:each={contacts.data} for:item="contact">
   <p key={contact.Id}>{contact.Name}</p>
  </template>
 <template if:true={contact.error}>
   <c-error-panel errors={contacts.error}></c-error-panel>
 </template>

import {LightningElement,wire} from 'lwc';
import getContactList from '@salesforce/apex/ContcatControler.getContactList';

export default class ApexWireMethodToProperty extends LightningElement{
  @wire(getContactList) contacts;
}


ex : apex wire method to function

 import { LightningElement,wire,track } from 'lwc'
 import getContactList from '@salesforce/apex/ContactController.getContactList';

 export default class ApexWireMethodToFunction extends LightningElement {
    @track contacts;
    @trck  error;
   
    @wire(getContactList)
    wiredContacts({ error,data}){
      if(data){
       this.contacts=data;
      } else if (error){
         this.error =error;
       }
   }
 }

 <template if:true={contacts}>
   <template for:each={contacts} for:item="contact">
     <p key={contact.Id}>{contact.Name}>/p>
    </template>
   <template if:true={error}>
    <c-error-panel errors={error}></c-error-panel>
   </template>

ex: Apex imperative Method

  import {LightningElement,track} from 'lwc';
  import getContactList from '@salesforce/apex/ContactController.getContactList';

 export default class ApexImperativeMethod extends LightningElement{
   @track contacts;
   @track error;

   handleLoad(){
     getContactList()
       .then(result => {
          this.contacts= result;
         })
        .ctach( onrejected: error=>{
            this.error = error;
          });
   }

  }