Lightning how to pass attribute value from one component to other when a link is clicked from the table row of records

Question

please help me in resolving the issue. I'm not able to get the attribute value when a record link is clicked from the table row. I have two components the first one holds the list of records where the Account name is hyperlinked. When I click the Account Name the second component is being opened, but I'm not able to get the Id of the Account name in attribute value which I would like to bind with the second component.

1st component

<aura:component >   
<aura:attribute name="RecordId" type="String" description="Selected Account record"/>
<aura:attribute name="isOpen" type="boolean" default="false" />

<div >                                  
    <table >
        <aura:iteration items="{!v.searchResult}" var="acc" indexVar="count">
            <tr class="slds-cell-buffer_right">                                                                   
                <td>                            
                    <a onclick="{!c.onAccountChange}"  aura:id="selectid" value="{!acc.Id}" >
                      {!acc.Name} 
                    </a>
                </td>                         
            </tr>
        </aura:iteration>
    </table>     
</div>    

<aura:if isTrue="{!v.isOpen}">
    <div tabindex="-2" role="dilaog" aura:id="Modalbox" class="slds-modal slds-fade-in-open slds-align_absolute-center" >             
        <c:Component2 aura:id="innerCmp" RecordId="{#v.RecordId}"/>                           
    </div>
    <div class="slds-backdrop slds-backdrop--open"></div>  
</aura:if>    
</aura:component>

Js controller

onAccountChange : function(component, event, helper) { 
    var recordid = event.getSource().get("v.value");
    //alert(recordid);
    //component.find("selectid").get("v.value");
    //var recordid = event.currentTarget.getAttribute("data-RecordId");
    component.set("v.RecordId", recordid);
    console.log('record id is :: '+recordid);
    component.set("v.isOpen", true); 
},   

2nd Component

<aura:component >   

<aura:handler name="init" value="{!this}" action="{!c.RecordforAccount}"/> 
<aura:attribute name="RecordId" type="String" description="Selected Account record"/>

<div class="slds-p-around_x-large" >
    <p class="slds-p-horizontal_xx-large">
        <lightning:input label="Account" type="String"  
                         value="{!v.CustomObj.Account__c}"/>
        <lightning:input label="Customer" type="String" required="true" aura:id="requiredField"
                         value="{!v.CustomObj.Name}"/>
        <lightning:input label="Start Date" type="datetime"
                         value="{!v.CustomObj.Start_Date__c}"/>
        <lightning:input label="End Date" type="datetime"
                         value="{!v.TCustomObj.End_Date__c}"/>
    </p>
    <lightning:button class="slds-button slds-button--brand" aura:id="saveId" label="Save" onclick="{!c.doSave}"/>               
</div>  

Js Controller

RecordforAccount : function(component, event, helper) {
  var account = component.get('v.RecordId');
  component.set("v.CustomObj.Account__c", account);        
},

How can I get the record Id when I click the link in lightning component, in this case?

Answer 1

In the 1st component change unbound expression {#v.RecordId} to bound expression {!v.RecordId} (RecordId attribute inside of c:Component2).

# is used for one-time binding. It means that RecordId is passed into your component only once. Changes are not propagated.

There is a great source of examples and explanation in Salesforce documentation: Data Binding Between Components.

Answer 2

We can give the data holding value in the same anchor tag

<a onclick="{!c.onAccountChange}" data-recid="{!acc.Id}">{!acc.Name}</a>

and in Js cotroller i need to call this with

var recordid = event.target.getAttribute('data-recid'); 
console.log('record id is '+recordid);

Answer 3

You can wrap your <a> in a <div> and do something like so:

<td>
    <div data-recordid="{!acc.Id}" onclick="{!c.onAccountChange}">
        <a href="{!'/'+acc.Id}" target="_blank">{!acc.Name}</a>
    </div>
</td>

ControllerJS

onAccountChange : function(component, event, helper) { 
    //var recordid = event.getSource().get("v.value");
    //alert(recordid);
    //component.find("selectid").get("v.value");
    //var recordid = event.currentTarget.getAttribute("data-RecordId");

    var selectedRow = event.currentTarget;
    var recordid = selectedRow.dataset.recordid;

    component.set("v.RecordId", recordid);
    console.log('record id is :: '+recordid);
    component.set("v.isOpen", true); 
},