Skip to content

Latest commit

 

History

History
93 lines (65 loc) · 3.77 KB

LWC.md

File metadata and controls

93 lines (65 loc) · 3.77 KB
Raw

Lightning Web Components

  • Lightning web components are custom HTML elements built using HTML and modern JavaScript.
  • Lightning Web Components uses core Web Components standards.

HTML Templates

A component that renders UI has 2 parts.

  1. An HTML template file.
  2. A JavaScript class file. which is an ES module
  • Lightning Web Components templating system uses the virtual DOM to render components smartly and efficiently.
  • Use simple syntax to declaratively bind a component’s template to data in the component’s JavaScript class.
  • A template is valid HTML with a <template> root tag
  • You write templates using standard HTML and a few directives that are unique to Lightning Web Components.
  • Directives are special HTML attributes, like if:true and for:each, that give you more power to manipulate the DOM in markup.

Data Binding

Handle User Input

Use Getters to Compute a Value

Render Lists

Render HTML Conditionally

Render Multiple Templates

Import a Component Dynamically

Calling Apex Methods From LWC

Expose Apex Methods to Lightning Web Components

  1. Define a static method in the Apex class and annotate it with @AuraEnabled(cacheable=true)
public with sharing class ExampleController {

     @AuraEnabled(cacheable=true)
    public static void exampleMethod(string recordId) {
    
    }
}

2.Import the static method defined in Apex Class and use it.

import { LightningElement, api } from 'lwc';
import exampleMethod from '@salesforce/apex/ExampleController.exampleMethod';  // Importing Apex Method

export default class ExampleComponent extends LightningElement {

    @api recordId;

    // Calling Apex Method and passing the param
    connectedCallback() {
      exampleMethod({recordId: this.recordId})
      .then(result => {})
      .error(error => {})
    }
}

Reference