How do I find an element in an aura component from the client-side controller?

Question

How do I get a reference to a child component of the current component from within the controller? For example:

<aura:component>
  <div class="container">
    <foo:myComponent />
  </div>
</aura:component>

In this case I would like to have a reference to myComponent from within this component's controller.

Answer 1

You need to assign an aura:id to your component and then use find().

Component:

<aura:component>
  <div class="container">
    <foo:myComponent aura:id="myFancyComponent" />
  </div>
</aura:component>

Controller:

init: function(cmp, event){
    var myComponent = cmp.find("myFancyComponent");
}