Aura.Action : Lightning Framework Specific Attributes Type

In this blog, I am going to explain "Aura.Action" attribute type and its usage.

There is another Lightning Framework specific attribute "Aura.Component[]". If you want to learn more about this then refer below blog:

Aura.Component[] : Lightning Framework Specific Attributes Type


Aura.Action

Use this type of attribute if you want to pass the reference of parent lightning component controller.js function to nested/child lightning component. This will help to invoke parent component JS function from child component markup.

Below is syntax to define this kind of attribute:

<aura:attribute name="parentJSFunction" type="Aura.Action"/>

This is useful if you want to make reusable component to appear based on values passed from parent and close/hide the component by invoking parent lightning component JS function.

I have created a sample component to explain how to invoke parent component function and child component function by passing "Aura.Action" attribute to child component.

Below is snapshot of Lightning component ("SK_AuraActionDemoCmp")  UI which contains child component ("SK_AuraActionChildCmp")  inside it.

Child component contains 2 buttons which will invoke JS function of parent and same component. Child component contains an attribute of type "Aura.Action" through which we will parent parent component JS function reference.

<aura:attribute name="closeChildDivFunction" type="Aura.Action" default="{!c.defaultCloseAction}"/>

If you don't pass JS function from parent component then child component will invoke its own JS function "defaultCloseAction".

If user click on these 2 buttons, then below things will happen:

• If user clicks on "Close via Parent JS function" button,then complete content will also get removed and ltnguserActionMessage will display message saying "Close via Parent JS function button clicked. Please refresh your browser if you again want to load this demo component"

• If user clicks on "Close via ChildCmp JS function" button,then only child component body will be removed and ltnguserActionMessage  will display message saying "Close via ChildCmp JS function button clicked.Please refresh your browser if you again want to load this demo component"

Please find below complete code reference:

Hope this will help!!