• Lightning Component Basics: Add Two Numbers

    Published By: Venu Gutta
    Published on: Saturday 16 December 2017
    A- A+
    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}

  • 1 comment to ''Lightning Component Basics: Add Two Numbers"

    ADD COMMENT