Component Attributes

Component attributes are like member variables on a class in Apex. They are typed fields that are set on a specific instance of a component, and can be referenced from within the component’s markup using an expression syntax. Attributes enable you to make components more dynamic.

Use the <aura:attribute> tag to add an attribute to the component or app. Let’s look at the following sample, helloAttributes.app:

1<aura:application>
2    <aura:attribute name="whom" type="String" default="world"/>
3    Hello {!v.whom}!
4</aura:application>

All attributes have a name and a type. Attributes may be marked as required by specifying required="true", and may also specify a default value.

In this case we’ve got an attribute named whom of type String. If no value is specified, it defaults to “world”.

Though not a strict requirement, <aura:attribute> tags are usually the first things listed in a component’s markup, as it provides an easy way to read the component’s shape at a glance.

Attribute Naming Rules

An attribute name must follow these naming rules:

Must begin with a letter or an underscore
Must contain only alphanumeric or underscore characters

Expressions

helloAttributes.app contains an expression, {!v.whom}, which is responsible for the component’s dynamic output.

{!expression} is the framework’s expression syntax. In this case, the expression we are evaluating is v.whom. The name of the attribute we defined is whom, while v is the value provider for a component’s attribute set, which represents the view.

Expressions are case sensitive. For example, if you have a custom field myNamespace__Amount__c, you must refer to it as {!v.myObject.myNamespace__Amount__c}.

Note

Supported aura:attribute Types

aura:attribute describes an attribute available on an app, interface, component, or event.
Basic Types
Function Type

An attribute of an aura:method can have a type corresponding to a JavaScript function so that you can pass a function into the method. An attribute of a component can’t have a type corresponding to a JavaScript function.
Object Types
Standard and Custom Object Types
Collection Types
Custom Apex Class Types

An Aura component attribute type can correspond to values held in an Apex class. An attribute type can be a custom Apex class, a List standard Apex class, or a Map standard Apex class. To use values held in other standard Apex classes, first create a custom Apex class, and then copy the needed values from instances of the standard class into your custom class.
Framework-Specific Types

See Also