Lightning Component Basics: Add Two Numbers

In this post we are going to learn what is Attributes in Lightning Component and how to use it in components.

Attributes: Lightning Component Attributes are like  member variables in apex class.

syntax: <aura:attribute name=" " type=" " default=" " />
 here name and type are required.

ex: <aura:attribute name="Salesforce" type="String"  />


Add2nums.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:attribute name="Number1" type="Integer" default="20" />
        <aura:attribute name="Number2" type="Integer" default="30" />
        <aura:attribute name="Sum" type="Integer" />
          {!v.Number1}+{!v.Number2}={!v.Sum}
    <br/> <br />
    <ui:button label="Click Here" press="{!c.add}" />
</aura:component>

Add2numscontroller.js

({
add : function(component) {
        var add2=component.get("v.Number1")+component.get("v.Number2");
        component.set("v.Sum",add2);
}

})

Add2nums.app

<aura:application >
    <c:Add2nums/>
</aura:application>

output:

when we click button Java script function get called and will set the value to {!v.Sum}

Subjects:

Lightning Component Basics Lightning Components

Share This: