Mastering in Lightning component attributes

Introduction

          In this post, I am going to explain lightning component attributes. Component attributes are like member variables on a class in Apex.  Lightning component attributes are used to exchange data between components.  They have 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. .Use the <aura:attribute> tag to add an attribute to the component or app. 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. Let’s look at the following sample where I have defined two attributes of type String, Integer.

From the above example
  1. 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.

  2. Must begin with a letter or an underscore
  3. Must contain only alphanumeric or underscore characters
  4. You can set default values
  5. Make it as required
  6. You can access the attributes by using the {!expression}  syntax .for example {!v.intAttribute} allow you to access the intAttribute attribute .

Now, let’s go deep into the different types of attributes and how we will be able to use them in the lightning components.

Basic Attributes Type 

The component supports different types of attributes basic types like Boolean, Integer, String, Number etc and Object type and Complex types like functions and Facets.  Here are the supported basic type values. Some of these types correspond to the wrapper objects for primitives in the apex.


Once you define the attributes you can able to access by using   {!v.<attribute>} expression syntax as shown below.

Function Type

 An attribute can have a type corresponding to a JavaScript function. If a child component has an attribute of this type, you can pass a callback from a parent component that contains the child component. You will be able to use function type when you’re returning the asynchronous data from the aura:method callbacks.

In the below example, The echo aura:method has an aura:attribute with a name of the callback. This attribute enables you to set a callback that’s invoked by the aura:method after execution of the server-side action.

Object Types

An attribute can have a type corresponding to an Object. For example:


Salesforce recommends using type=”Map” instead of type=”Object” to avoid some deserialization issues on the server. You could able to iterate the object as shown below.

Collection Types 

An attribute can have a type corresponding to like the set, list or Map. you can use aura:iteration to iterate over the collections.

Custom Apex types 

An attribute can have a type corresponding apex wrapper class as an attribute type.

You will be able to refer the apex class as attribute as shown below.

Facet  Types

A facet is an attribute of type Aura.Component[]. The body attribute is an example of a facet. in this example, I defined two Aura.component[]  attributes which are passed when the component is instantiated. FacetDef component contains the title and footer attributes that are passed when components are instantiated from the FacetWrapper component.

FacetDef.cmp

FacetWrapper.cmp

Aura Action Types

An Aura.Action is a reference to an action in the framework. If a child component has an Aura.Action attribute, a parent component can pass in an action handler when it instantiates the child component in its markup. This pattern is a shortcut to pass a controller action from a parent component to a child component that it contains and is used for on*handlers, such as onclick.
AuraAction.cmp

Invoke.cmp

 

Inheritance

A subcomponent that extends a super component inherits the attributes of the super component. Attribute values are identical at any level of extension. There is an exception to this rule for the body attribute, which we’ll look at more closely soon. In this example, I defined an attribute with name parentStr on the parent component. when child component extends the parent component it will inherit the parentStr attribute form the parent component without defining it again same as like apex or java.

Parent.cmp

SubCmp.cmp

when child component extends the parent component it will inherit the parent component attribute as shown above.

Interface

Other OOP programming like Java, Apex etc lightning component has Object-oriented support to define the interface that defines a set of signatures. the below example contains the set of attributes which you could use when you implement this interface.

when a component implements an interface all attributes, methods, and events will be available by the compiler in the background, so the attributes will be available at runtime – say no need to really ‘implement’  from the interface by yourself as shown below.