Step 4: Create a Nested Component

As your component grows, you want to break it down to maintain granularity and encapsulation. This step walks you through creating a component with repeating data and whose attributes are passed to its parent component. You’ll also add a client-side controller action to load your data on component initialization.

Click File | New | Lightning Component.
Enter expenseList in the New Lightning Bundle window. This creates a new component, expenseList.cmp.

In expenseList.cmp, enter this code.

Use the API name of the fields to bind the field values. For example, if you’re using a namespace, you must use {!v.expense.myNamespace__Amount__c} instead of {!v.expense.Amount__c}.

Note

1<aura:component>
2    <aura:attribute name="expense" type="Expense__c"/>
3    <!-- Color the item blue if the expense is reimbursed -->
4    <div class="slds-card">
5    <!-- If you registered a namespace, 
6                use v.expense.myNamespace__Reimbursed__c == true instead. -->
7    <div class="{!v.expense.Reimbursed__c == true 
8                       ? 'slds-theme--success' : 'slds-theme--warning'}">
9          <header class="slds-card__header slds-grid grid--flex-spread">
10              <a aura:id="expense" href="{!'/' + v.expense.Id}">
11                  <h3>{!v.expense.Name}</h3>
12              </a>
13          </header>
14        
15       <section class="slds-card__body">
16           <!-- If you registered a namespace, 
17                use v.expense.myNamespace__Reimbursed__c instead. -->
18           
19          <div class="slds-tile slds-hint-parent">
20              <p class="slds-tile__title slds-truncate">Amount: 
21                  <ui:outputNumber value="{!v.expense.Amount__c}" format=".00"/>
22              </p>
23        <p class="slds-truncate">Client: 
24            <ui:outputText value="{!v.expense.Client__c}"/>
25        </p>
26        <p class="slds-truncate">Date:
27            <ui:outputDateTime value="{!v.expense.Date__c}" />
28        </p>
29        <p class="slds-truncate">Reimbursed?
30            <ui:inputCheckbox value="{!v.expense.Reimbursed__c}" click="{!c.update}"/>
31        </p>
32    </div>
33        </section>
34    </div>
35    </div>
36</aura:component>

Instead of using {!expense.Amount__c}, you’re now using {!v.expense.Amount__c}. This expression accesses the expense object and the amount values on it.

Additionally, href="{!'/' + v.expense.Id}" uses the expense ID to set the link to the detail page of each expense record.

In form.cmp, update the aura:iteration tag to use the new nested component, expenseList. Locate the existing aura:iteration tag.

1<aura:iteration items="{!v.expenses}" var="expense">
2    <p>{!expense.Name}, {!expense.Client__c}, {!expense.Amount__c}, {!expense.Date__c}, {!expense.Reimbursed__c}</p>
3</aura:iteration>

Replace it with an aura:iteration tag that uses the expenseList component.

1<aura:iteration items="{!v.expenses}" var="expense">
2    <!--If you’re using a namespace, use myNamespace:expenseList instead-->
3    <c:expenseList expense="{!expense}"/>
4</aura:iteration>

Notice how the markup is simpler as you’re just passing each expense record to the expenseList component, which handles the display of the expense details.

Save your changes and reload your browser.

You created a nested component and passed its attributes to a parent component. Next, you’ll learn how to process user input and update the expense object.

Beyond the Basics

When you create a component, you are providing the definition of that component. When you put the component in another component, you are create a reference to that component. This means that you can add multiple instances of the same component with different attributes. For more information about component attributes, see Component Composition.

Lightning Components Developer Guide

Step 4: Create a Nested Component

Beyond the Basics

See Also: