Appending Lightning component into other lightning component through controller action

Question

I have defined two custom lightning component. Id like to append one of them inside the other when the user clicks on one element For Instance the first element is invoices.cmp, it has this icon :

      <lightning:icon iconName="utility:add" size="small"
                                        onclick="{!c.addLine}"/>
<div id="factureLines">
                        <p>Add a line to this facture</p>
                       <c:LineFields/>
                   </div>

I would like to append to the div with id factureLines another instance of my custom component LineFields... How would you define the function addLine in the invoice component controller to achieve this.

Answer 1

You need an attribute for this. Either aura:iteration to display multiple rows, or an Aura.Component[] attribute to dynamically show rows.

---

By Iteration

<aura:attribute name="lineItems" type="List" default="[]" />

---

<aura:iteration items="{!v.lineItems}" var="item">
  <c:LineFields />
</aura:iteration>

---

addLine: function(c,e,h) {
  var lines = c.get("v.lineItems");
  lines.push({...});
  c.set("v.lineItems",lines);
}

---

By Dynamic Creation

---

<aura:attribute name="lineItems" type="Aura.Component[]" default="[]" />

---

<div id="factureLines">
  {!v.lineItems}
</div>

---

addLine: function(c,e,h) {
  $A.createComponents(
    [["c:LineFields",{}]],
    function(components) {
      var lineItems = c.get("v.lineItems");
      lineItems = lineItems.concat(components);
      c.set("v.lineItems", lineItems);
    }
  );
}