0

I want to be able to reference an element in a Lightning component that's nested in a parent component.

Child component (named "MyChildComponent")

<aura:component>
    <lightning:input aura:id="childComponentElement"
                     type="text"
                     label="My Child Component Input" />
</aura:component>   

Parent component

<aura:component>
    <c:MyChildComponent aura:id="childComponent" />
</aura:component>   

I'm trying to reference the child from the parent controller.js so I can hide the input at certain times:

Parent Controller.js

var myChildComponentElement = component.find("childComponentElement ");
$A.util.addClass(myChildComponentElement , "slds-hide");

But that doesn't seem to work. Any thoughts?

  • why don't you wrap it in div's and assign an aura:id ? – glls Aug 14 '19 at 23:06
  • @glls the child element does have an aura:id. – Matt Smith Aug 14 '19 at 23:07
1

Although below method is possible as of today in AURA, this is anti pattern according to LWC DOM access containment - https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.security_locker_dom

Since both parent and child components are in same namespace, you can modify the elements inside child component from parent like below :

    let childComponent = component.find("childComponent");
    let childComponentElement = childComponent.find("childComponentElement");
    $A.util.addClass(childComponentElement , "slds-hide");

However you cannot access elements inside childComponentElement since it is of lightning namespace.


A better approach (future proof) would be to use public methods:

Parent.JS:

let childComponent = component.find("childComponent");
childComponent.toggleInput("childComponentElement");

Child.cmp:

<aura:component >

    <aura:attribute name="element" type="String" />

    <aura:method name="toggleInput" action="{!c.toggleInput}" >
        <aura:attribute name="element" type="String" />
    </aura:method>

    <lightning:input aura:id="childComponentElement"
                     type="text"
                     label="My Child Component Input" />

</aura:component>

Child.JS:

toggleInput : function(component, event, helper) {
    let element = event.getParam("arguments").element;
    $A.util.toggleClass(component.find(element), "slds-hide");
}
| improve this answer | |
0

You cannot modify a component's internal components from the outside, nor can a child component directly manipulate its parent component. This is a security feature built in to Aura, that allows potentially untrusted components from different developers to remain secure within the same page/app. You would need to either hide the component completely by applying the class to it, or modify the child component to allow a class or attribute to be set to hide the input field.

| improve this answer | |
  • It is actually possible. Given in answer how. – salesforce-sas Aug 15 '19 at 4:48
  • @salesforce-sas You should not rely on this behavior. The documentation for Aura says A component represents a unit of a page. Each component is independent. This means that they know nothing about each other. To make them communicate, a Publish/Subscribe (Mediator) pattern is used. While it is technically true that you can currently do so within the same namespace, this is not future-compatible. All components should use the Publish/Subscribe model for communication, and not attempt to directly modify each other. – sfdcfox Aug 15 '19 at 5:36
  • @salesforce-sas Also, this behavior is not LWC compatible at all. While your answer demonstrates that it is currently possible, it is only a "happy coincidence" that it does so for the moment. There's also another doc I can't find right now that talks about isolation of components in a future release. Until/unless the docs specifically tell us this is allowed, we have to assume that all the existing documentation, which tells us not to do this, is correct. – sfdcfox Aug 15 '19 at 5:38
  • In developer.salesforce.com/docs/atlas.en-us.lightning.meta/…, we are trying to directly get attribute values from source (even aura component). What I did is a little extension of same. Do you think this is not valid? – salesforce-sas Aug 15 '19 at 7:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.