Attributes in component

<aura:attribute>
aura:attribute is used to create an attribute on an app, interface, component, or event.

Attributes:

a. access :Indicates whether the attribute can be used outside of its own namespace.
b. name : Required. The name of the attribute.
c. type : Required. The type of the attribute.
Possible values (Date, DateTime, Decimal, Double, Integer , Long , String ,Boolean)
d. default : Value that should be assingned to the attribue if no values are assigned to it
e.description : A summary of the attribute and its usage
f. required : Specified wheather attribute value need to be required to run this component.

Example:
<aura: attribue name=”empName” type=”String” defualt=”sfdcmeet” required=”true” />

<aura:component >
    <aura:attribute  name="empName" type="string"/>
    <aura:attribute  name="salary" type="Decimal" required="true"/>
    <aura:attribute  name="city" type="string" default="Hyd"/>
    <aura:attribute  name="phones" type="String[]" 
                     description="This contains all phone numbers />	
</aura:component>

How to read the values of attributes in the component/application?

1. We get the values of the atrributes using {! v.attributeName} as below

{! v.empName }
{! v.salary}
{! v.city}
{! v.phone}

Example : How to pass the values of the component from application

a. Create a new Component : employee.cmp

<aura:component >
    <aura:attribute name="name" type="string"  required="true"/>
    <aura:attribute name="exp"  type="Decimal"  />
    <aura:attribute name="City" type="String" default="Hyd" />

   <div>
      Employee Name : {! v.name} <br/>
      Employee Exp  : {! v.exp} <br/>
     Employee City :{! v.city}
   </div>
</aura:component>

b. Include CSS properties for the component : employee.css

.THIS {
        padding-top: 40px;
    	padding-left:80px;
    	color: blue;
}

c. Create an application : sfdcmeet.app

<aura:application >
           <c:employee name=”Ranjith Krishnan” exp=”3.4″ />
</aura:application>

Example : Create a component – Student.cmp

<aura:component >
      <aura:attribute name="lastName" type="String"  required="true"/>
      <aura:attribute name="firstName" type="String"/>
      <aura:attribute name="phone" type="String />
		Last Name : {! v.lastName} <br/>	
		FirstName : {!v.firstName} <br />
		Phone     : {!v.phone}
</aura:component>

Create an application to preview the component: Student_Example.app to preview the component: Student_Example.app

<aura:application >
  <c:Student lastName="Krishnan" firstName="Ranjith" phone="040-1234"/>
</aura:application>