Migrate Attributes ( Aura to LWC)

Hi,

Here we are going to learn how can we migrate attributes in Aura (<aura:attribute>) to JavaScript properties in a Lightning web component.

Let's take an attribute called "greeting" and see how we can define the same in the "Aura component" and "Lightning web component".


Aura Component:

In Aura Component we "<aura:attribute>" tag for defining properties to pass data between "Controller.js" and "Component.cmp(mark up)" .

"<aura:attribute>" supports two way data binding.

<aura:component>
    <aura:attribute name="greeting" default="Hello" />
</aura:component>

Lightning web component:

In the Lightning web component, we have to use JavaScript properties. It doesn't support two-way data binding so we have to capture data and assign the data to property in JavaScript if the property is getting input from the user instead of default values. Here we are just talking about JavaScript property with a default value.

JavaScript File:

import { LightningElement,api} from 'lwc';
export default class MyComponentName extends LightningElement {
   @api greeting= 'Hello';
}

Here we defined a public property called "greeting" in JavaScript. We can pass data from other LWC components or Aura components as well.

Here "api" is decorator which makes your JavaScript property as public property.

You can have private property as well.  You can have look about decorator in the following link:
https://developer.salesforce.com/docs/component-library/documentation/en/lwc/reference_decorators

HTML File:

<template>
    {greeting}
</template>

Reference:

https://www.youtube.com/watch?v=G7oJDD6RMWU&list=PL-JzyFWuCbkKcFSOCRlCUk79YbET5QvZC (Salesforce Techbook (lightning web component sessions)
https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.migrate_attributes