NOTE: To access an attribute in a component, use expressions as {! v.<Attribute Name>}.
----------------------------------------------------------------------------------------------------------------------
<aura:component >
<!--Basic types-->
<aura:attribute name="ItemName" type="String" default="Bag"/>
<aura:attribute name="SerialNumber" type="Long" default="1"/>
<aura:attribute name="Quantity" type="Integer" default="2"/>
<aura:attribute name="Price" type="Decimal" default="blue"/>
<aura:attribute name="PurchaseDate" type="Date" default="2018-11-9"/>
<aura:attribute name="Dispatched" type="Boolean" default="true"/>
<aura:attribute name="Color" type="String" default="blue"/>
<!--Collection types-->
<aura:attribute name="ColorArray" type="String[]" default="['red', 'green', 'blue']"/>
<aura:attribute name="ColorList" type="List" default="['red', 'green', 'blue']"/>
<aura:attribute name="ColorMap" type="Map" default="{a: 'red', b: 'green', c: 'blue'}"/>
<aura:attribute name="ColorSet" type="Set" default="['red', 'green', 'blue','red']"/>
<!--Object types-->
<aura:attribute name="PersonObject" type="Object" default="{'name': 'John', 'age': '25'}"/>
<a><b>My component</b></a>
<h1>This is a test component</h1>
<p>Your component code goes here.</p>
<p>
<!--Using collection Types-->
<strong>Array values</strong>
<aura:iteration items="{! v.ColorArray}" var="color">
<div>{! color} </div>
</aura:iteration>
<strong>List values</strong>
<aura:iteration items="{! v.ColorList}" var="color">
<div>{! color} </div>
</aura:iteration>
<strong>Map values</strong>
<div>{! v.ColorMap.a} </div>
<div>{! v.ColorMap.b} </div>
<div>{! v.ColorMap.c} </div>
<strong>Set values</strong>
<aura:iteration items="{! v.ColorSet}" var="color" indexVar="index">
<div>{! color} </div>
</aura:iteration>
</p>
</aura:component>
Note: To access an attribute in a controller and helper, use expressions as {v.<Attribute Name>}:
=======================================================================
({
doInit : function(component, event, helper) {
//javascript to initialize the component
var color = component.get("v.Color");
var Price = component.get("v.Price");
console.log('color is ',color);
console.log('Price is ',Price);
}
})
Note: When we using the attribute in Component, we must use the exclamatory sign. But when we access the attribute in Controller and Helper, we do not use exclamatory sign.
OUTPUT
----------------------------------------------------------------------------------------------------------------------
<aura:component >
<!--Basic types-->
<aura:attribute name="ItemName" type="String" default="Bag"/>
<aura:attribute name="SerialNumber" type="Long" default="1"/>
<aura:attribute name="Quantity" type="Integer" default="2"/>
<aura:attribute name="Price" type="Decimal" default="blue"/>
<aura:attribute name="PurchaseDate" type="Date" default="2018-11-9"/>
<aura:attribute name="Dispatched" type="Boolean" default="true"/>
<aura:attribute name="Color" type="String" default="blue"/>
<!--Collection types-->
<aura:attribute name="ColorArray" type="String[]" default="['red', 'green', 'blue']"/>
<aura:attribute name="ColorList" type="List" default="['red', 'green', 'blue']"/>
<aura:attribute name="ColorMap" type="Map" default="{a: 'red', b: 'green', c: 'blue'}"/>
<aura:attribute name="ColorSet" type="Set" default="['red', 'green', 'blue','red']"/>
<!--Object types-->
<aura:attribute name="PersonObject" type="Object" default="{'name': 'John', 'age': '25'}"/>
<a><b>My component</b></a>
<h1>This is a test component</h1>
<p>Your component code goes here.</p>
<p>
<!--Using collection Types-->
<strong>Array values</strong>
<aura:iteration items="{! v.ColorArray}" var="color">
<div>{! color} </div>
</aura:iteration>
<strong>List values</strong>
<aura:iteration items="{! v.ColorList}" var="color">
<div>{! color} </div>
</aura:iteration>
<strong>Map values</strong>
<div>{! v.ColorMap.a} </div>
<div>{! v.ColorMap.b} </div>
<div>{! v.ColorMap.c} </div>
<strong>Set values</strong>
<aura:iteration items="{! v.ColorSet}" var="color" indexVar="index">
<div>{! color} </div>
</aura:iteration>
</p>
</aura:component>
Note: To access an attribute in a controller and helper, use expressions as {v.<Attribute Name>}:
=======================================================================
({
doInit : function(component, event, helper) {
//javascript to initialize the component
var color = component.get("v.Color");
var Price = component.get("v.Price");
console.log('color is ',color);
console.log('Price is ',Price);
}
})
Note: When we using the attribute in Component, we must use the exclamatory sign. But when we access the attribute in Controller and Helper, we do not use exclamatory sign.
OUTPUT