Lightning Attributes

Component attributes are like variables in an Apex class. They are used to store values inside an aura component. They are used in the lightning markup using an expression syntax.

We can use the <aura:attribute> tag to define an attribute to an lightning component. For example :

Here we have defined an attribute called “text” with this syntax :

<aura:attribute name="text" type="String"/>

Then, we can reference this attribute in the lightning markup with this syntax :

{!v.text}

Each aura attribute should have a name and a type, and we can also specify a default value for an attribute but it’s optional. Also, we can mark an attribute as required by adding ‘required=true’ in the attribute tag if we want to require this component to have a value when we load the component.

NOTE : The attribute names and references are case-sensitive. Keep that in mind while using it in your aura component markup.

How binding works in Aura components

Bound Expressions

In the example above we reference the “text” attribute in the aura component markup with this syntax :

{!v.text}

This is called a bound expression and we can use this same syntax to bind this attribute value with an input field for example :
<input label=”My Input” value=”{!v.text}” style=”font-weight: 400;”>/>

This act as a two way data binding between the input field’s value and the “text” attribute. Any changes in the input field will be reflected in the “text” attribute value and vice versa.

Let’s look at an example which demonstrates the two way data sync :

<aura:component>
    <aura:attribute name="text" type="String" default="my default"/>
   {!v.text} <br/> 
   <lightning:input value="{!v.text}"/>
</aura:component>

Here is the output for this aura component :

Changing the value in the input field changes the value in the attribute which is reflected back in the aura markup.

Unbound Expressions

Here is the syntax to refer attributes with unbound expressions :

{#v.text}

The difference between these and bound expressions is that if the value of the “text” attribute changes, the updated value is not reflected in the markup. We can say that these types of expressions are static and the value is only populated on the load of the component.

Example :

<aura:component>
 <aura:attribute name="text" type="String" default="my default"/>
{!v.text} <br/>
 <lightning:input value="{#v.text}"/>
</aura:component>

Here is the output for this component :

As you can see, changing the value in the input field does not update the value of the attribute.

NOTE :

Bound/Unbound Expressions work with any aura component, be it a standard or custom aura component. Therefore, these expressions can be used to pass attributes from a parent to a child aura component as well.
Example of passing attributes from parent to child aura component:

Parent Aura Component

<aura:component>
<aura:attribute name="text" type="String" default="text default"/>
 <c:child text="{!v.text}" />
</aura:component>

Child Aura Component

<aura:component>
      <aura:attribute name="text" type="String" default="text default"/>
      {!v.text}
</aura:component>

Types of Supported Aura Attributes

These are the supported aura attribute types in the aura framework :

• Basic Types
• Standard and Custom Sobject Types
• Collection Types
• Custom Apex Class Type.
• Function Type.
• Framework-Specific (component) Type.

Basic Types

These are the standard primitive types supported in aura attributes :

The table above demonstrates how to provide default values to each of the basic type attributes. And below is an example with all of these attribute types :

The syntax to reference these defined attributes in the markup is as follows :

Code:

<aura:component>
    
    <aura:attribute name="booleanFlag" type="Boolean" default="true" />
    <aura:attribute name="dateValue" type="Date" default="2020-03-03" />
    <aura:attribute name="datetimeValue" type="DateTime" default="2013-03-06T10:17:36.789Z" />
    <aura:attribute name="decimalValue" type="Decimal" default="200.12" />
    <aura:attribute name="doubleValue" type="Double" default="22100.12" />
    <aura:attribute name="integerValue" type="Integer" default="100" />
    <aura:attribute name="longValue" type="Long" default="456090" />
    <aura:attribute name="stringValue" type="String" default="Test String"/>
    
    Boolean : {!v.booleanFlag}
    Date : {!v.dateValue}
    DateTime : {!v.datetimeValue}
    Double : {!v.doubleValue}
    Decimal : {!v.decimalValue}
    Integer : {!v.integerValue}
    Long : {!v.longValue}
    String : {!v.stringValue}
    
</aura:component>

Output:

Standard and Custom Sobject Types

We can also use a standard or custom sobject as an aura attribute type. If used, then we can reference all the fields of that sobject via the attribute in our lightning component.

Example :

<aura:attribute name="acc" type="Account" 
                        default="{ 'sobjectType' : 'Account' ,
                                         'Name' : 'Test' ,
                                         'Description' : 'test description'" />

We can also use any custom sobject in place of the standard ‘Account’ sobject, we just need to use the API name of the object in the ‘type’ of the aura attribute. We can also provide a default value in the form of a json object.

Example :

<aura:component>
    <aura:attribute name="acc" type="Account" 
                    default="{ 'sobjectType' : 'Account' ,
                               'Name' : 'Test' ,
                               'Description' : 'test description' }" />    
    Name : {!v.acc.Name}    
  <br/>    
    Description : {!v.acc.Description}    
</aura:component>

Output :

Collection Types

Collection type of attributes like a list,set or map work just like their apex counterparts. We use these if we want to have a list of values in an attribute.

Below are the supported collection types supported in aura:attributes :

The “Map” and “Set” behave just like their apex counterparts as in, the “Set” type cannot contain duplicate variables and the “Map” type works in key-value pairs where each key is unique and can only have a single value corresponding to it.

Custom Apex Class Type

We can also use custom apex classes as a type for aura attributes. For example we can define a class as follows :

public class AuraWrapper {

    @AuraEnabled
    public String name; 

    @AuraEnabled
    public String subject; 
}

NOTE : We need to use @AuraEnabled with each variable that we want to be accessible in the lightning component.

Attribute Definition :

<aura:attribute name="wrap" type="AuraWrapper"/>

NOTE : Using the “default” tag with custom apex type attributes causes issues, so in order to provide a default value for these type of attributes then we need to do that with the init event.