Updating tab title without recreation

[Me]

Hey,

How to update (rename) tab title without removing and adding entire tab item again?

[Karthikeyan Viswanathan]

Hi Me,  

 

Thanks for contacting Syncfusion support.  

 

You can change the Tab header display name dynamically using the two-way binding in Angular 2. Please refer to the below code snippet:  

 

<code>  

 

<ej-tab  id= "tab"   

    <ul>  

        <li><a rel='nofollow' href="#twitter">{{header1}}</a></li>  

    </ul>  

</ej-tab>  

 

</code>  

<code>  

 

export class AppComponent {   

header1:string;  

 

                  constructor() {  

        this.header1="Twitter";  

                  }  

    nhbtnclick(){  

// Change the header name   

        this.header1= "Instagram";  

    }  

}  

 

</code>  

 

Sample link:  http://www.syncfusion.com/downloads/support/directtrac/129828/TABSAM~11418664411.ZIP   

 

Regards,  

Karthikeyan V. 

[Me]

How can I change tab title for dynamically created tabs without recreating them? Binding is not working there.

 tabObj.addItem(tabId, tabName, tabCount+1, null, tabId);

[Karthikeyan Viswanathan]

Hi Me,   

  

You can change the dynamic added Tab’s header name using tabId. Please refer to the below code snippet:   

  

<code>   

  

tabCreate(){ 

          var tabObj = jQuery("#tab").ejTab("instance"); 

          tabObj.addItem("#new", "New Item", 3, "myClass", "newItem"); 

      } 

  

</code>   

<code>   

 nhbtnclick(){ 

 

        // Using Tab Instance 

        var tabObj = jQuery("#tab").ejTab("instance"); 

        tabObj.items.find("a[rel='nofollow' href='#new']").html("Header"); 

 

        // using rel='nofollow' href  

        jQuery("a[rel='nofollow' href='#new']").html("New header"); 

        this.header1= "Instagram"; 

    } 

  

</code>   

  

Sample link: http://www.syncfusion.com/downloads/support/forum/129828/TABCOM~1-412375750.ZIP  

  

Regards,   

Karthikeyan V.