0

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.

3

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);
    }
  );
}

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.