can we add <lightning:tab> dynamically in the component

Question

I have added a

<lightning:tab>

in a lightning component. On button click I want to add this new tab.

Is there any way to do this. Please suggest.

Answer 1

I do not know your complete usecase but you can use aura:iteration to create new tabs.

<aura:attribute name="v.tabList" type="List"/>
<lightning:tabset aura:id="tabset" >
    <aura:iteration items="{!v.tabList}" var="item">
           <lightning:tab id="{!item.id>>
           </lightning:tab>
    </aura:iteration>
</lightning:tabset>

and you can dynamically add and remove items from tabList to add or remove tabs.

Answer 2

You could use the $A.createComponent(String type, Object attributes, function callback) method.

If you have a button in your component, let it call a method that implements the following code:

$A.createComponent(
            "lightning:tab",
            {
                "title": "Your dynamic Tab" //you can add more variables here
            },
            function(newTab, status, errorMessage){
                //Add the new tab to the body array
                if (status === "SUCCESS") {
                    var body = cmp.get("v.body");
                    body.push(newTab);
                    cmp.set("v.body", body);
                }
            }
        );

You also need to add {!v.body} expression to your component where you want your tab.

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_cb_dynamic_cmp_async.htm