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}”>
    <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

    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

    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:iteration items=”{!}” var=”property”>
                    // show the data associated with each property
            <template for:each={}  for:item=”property”>
                   //show content
  • 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

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 🙂

Lightning component table using Lightning Datatable with sorting and pagination.

I recently worked on the project where I needed to create table with pagination, sorting and be able to select page size.

I tried to find a good working example online and could find example where it will work with unlimited number of pages. I saw examples that used LIMIT in the query, which mean not all the records will be shown in the table.

I decided to write a component that will work with any number of records and will use StandardSetController and it’s methods like next(), previous() etc.





 public class LightningTableController {
    private static ApexPages.StandardSetController ssc;
    private static String query = 'SELECT Id, Name, FirstName, LastName, Email, MobilePhone FROM Contact';
    public static ResultWrapper getData( Integer pageSize, Integer pageNumber, String sortBy, String sortOrder ){
        if( sortby != NULL &amp;&amp; sortOrder != NULL  ){
            query += ' ORDER BY '+ sortby+' '+ sortOrder+' NULLS LAST';
        ssc = new ApexPages.StandardSetController( Database.getQueryLocator( query ) );
        //set page size
        //set page number 
        ssc.setPageNumber( pageNumber );
        return new ResultWrapper( (List)ssc.getRecords(), ssc.getResultSize());
    public class ResultWrapper {
        public List result {get;set;}
        public Integer totalNumberOfRecords {get;set;}
        public ResultWrapper( List result, Integer totalNumberOfRecords) {
            this.result = result;
            this.totalNumberOfRecords = totalNumberOfRecords;