Basic differences between Aura Component and Lightning Web Components in HTML

Lightning Web Components is an implementation of the W3C’s Web Components standards.The Aura Component framework is a UI framework for developing web apps for mobile and desktop devices. It’s a modern framework for building single-page applications with dynamic, responsive user interfaces for Lightning Platform apps. It uses JavaScript on the client side and Apex on the server side.

Aura components can contain Lightning web components but Lightning web components can’t contain Aura components.

When you create an Aura component , it has the following files:
example.cmp, exampleController.js, exampleHelper.js, exampleRenderer.js, example.css and a configuration file.
When you create a Lightning web component, it has the following files:
example.html, example.js, example.css and a configuration file

Here are the basic differences in HTMl between Aura and LWC:

  • An Aura component contains markup in a .cmp file. The file starts with an <aura:component> tag and can contain HTML and Aura-specific tags.A Lightning web component contains markup in a .html file.
  • The file starts with a <template> tag and can contain HTML and directives for dynamic content.
  • In Aura component the attributes are defined in <aura:attribute> tag. While in Lightning web component it is defined as JS properties.
  • Syntax for Dynamic component in Aura is {!v.count}, while in Lightning web component it is {count}. You don’t need the ‘!’ and the ‘v.’ .
  • Conditional markup changes from :
    <aura:if isTrue=”{!v.showsection}”>
        to
    <template if:true={showsection}></template>
    ( Please notice that there is no quotes around the dynamic content. This is true through out the LWC. )
  • In Aura you can do additional conditions in your expression language. In LWC, you will have to move this condition to JS. For example in Aura to check for a condition if the count is 1 , you can add it in the <aura:if> for example:
              <aura:if isTrue=”{!v.count > 1}”>
                          //show content
             </aura:if>

    While in lwc we have to move this logic to JS and use the variable in the expression language:
    HTML will look like this in LWC :

                 <template if:true={hasMoreThanOne}>
                           //show content
                 </template>

    JS will look like this:
                import { LightningElement, api } from ‘lwc’;
                export default class Paginator extends LightningElement {
                        @api count;
                         get hasMoreThanOne() {
                               return this.count === 1;
                         }
                 }

  • In Aura for Iterations we use <aura:iteration>, then use the ‘items’ attribute to pass the collection and ‘var’ attribute to pick the individual item from the collections. In LWC we can use ‘for:each’ and ‘for:item’ for passing collections and individual variable accordingly.
    Aura:
             <aura:iteration items=”{!v.properties}” var=”property”>
                    // show the data associated with each property
             </aura:iteration>
    LWC:
            <template for:each={properties.data.records}  for:item=”property”>
                   //show content
             </template>
  • We use the init handler in Aura to run code that we need to run before rendering an Aura component. In LWC we replace this with connectedCallback() lifecycle hook. There are multiple lifecycle hooks that you can use to run code at different stages of the component’s lifecycle.
  •  Self closing tags are not allowed in LWC, while they are allowed in Aura.
  • Aura CSS can be converted LWC CSS by removing ‘.THIS’
    To convert the Base Lightning components from Aura to LWC syntax, we can follow these points:
              * Change the colon that separates the namespace (lightning) and  component name (formattedNumber) to a dash.
              * Change the camel-case component name (formattedNumber) to a dash-separated name (formatted-number).
              * Change the camel-case attribute name (currencyCode) to a dash-separated name (currency-code).
    This will convert a lightning base component in Aura
         <lightning:formattedNumber/>
                             to
        <lightning-formatted-number></<lightning-formatted-number>

How to clear selected rows in Lightning DataTable?

I have a lightning datatable where I am displaying leads.

Once I selected the rows that I wanted and completed the action, I noticed that the checkboxes are not getting unchecked.

Here is what I added to the action method to make sure that the checkboxes will be unchecked after the action is completed.

Hope it helps 🙂