Lightning Component – Attributes

Attributes are used to perform the input and output operation in the Lightning Component or App. Attributes are just like Variables in the Apex Class. Need to use <aura:attribute> tag to declare the attribute in the Lightning Component or App.

Definition of <aura:attribute> tag

How can we access the attribute value?
Using this expression {!v.attributeName} In this case, it would be {!v.message}.

v means (View) Value Provider (represents in View Layer) which assists to access related data.

Attribute Types

1. Primitives Data Types: String, Integer, Decimal, Double, Long, Date, Date/Time,  Boolean
2. Collection: Array, Set, List, Map
3. sObjects: StandardObject, CustomObject__c
4. Custom Apex Class
5. Framework Types: Aura.component, Aura.Component[]

Let’s GO

Step 1: Using the Same Lightning Component “Welcome.cmp” and same CSS file “Welcome.css” (Please create, if it’s not there)

Welcome.cmp | Attribute Declaration

<aura:component >    
    <!-- attributes declaration -->
    <aura:attribute name="message" type="String" default="Hello" description="Used for showing the message in Lightning Component"/>  
    
     <div class="slds slds-m-top--x-large slds-align_absolute-center tagLine">
    	<!-- access the attribute -->
        {!v.message}
    </div>
    
</aura:component>

Welcome.css | Describes Styling

.THIS.tagLine {   
    font-size:30px;
    color:#0066CC;   
}

Step 2: Calling from Lightning App “LearningLightning.app” with message attribute

<aura:application extends="force:slds">
    <c:Welcome message="Welcome to Everyone !!"/>
</aura:application>

Step 3: Result

Step 4: Calling from Lightning App “LearningLightning.App” without message attribute

<aura:application extends="force:slds">
    <c:Welcome/>
</aura:application>

Step 5: Result

It will show “Hello” as the default value of the “message” attribute(in Step 1) due to we have not passed the value of “message” attribute from the App to Component.

3,004 total views, 1 views today