Passing the value from Lightning component to client side controller

Today I got a requirement. Which is interesting to me. I hope it will be same for you all. Requirement is need to show the list of records(eg. Account) once the user click the record need to pass the account id to the client side controller and we need to do some operation on that record. In this blog I am going to explain how we pass the value from the component to client side controller.

Below is the part of my  lightning component page where I am passing the value to client side controller.

<aura:iteration items="{!v.accountRcds}" var="acc">
    <div onclick="{!c.showrecord}" data-accId="{!acc.Id}" >
        {!acc.Name}
     </div>
     <br/>
</aura:iteration>

In the above code If you see the div tag. In the div tag I have used a attribute called data-accId="{!acc.Id}" which is data-Attribute in HTML. For more details about data-Attribute click here

Now I need to catch the value. Below is the part of my lightning component client side controller code where I am getting the value from the data-Attribute which I declared in the div tag.

  showrecord : function(component, event, helper)
    {
        var selectedItem = event.currentTarget;
        var accountId= selectedItem.dataset.accId;
       alert(accountId);
    },

When user click the account name, by using the 'currentTarget' event property I can able to get the value from the data-Attribute which I declared(accId) in the div tag.  More information about the currentTarget property click here

I hope this post help you to pass the value from component to client side controller.

I hope you find this article interesting, Rate this article if its useful to you.

Let me know if you have any question or suggestions in comment section.

Rating: 
Average: 3.8 (4 votes)