We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Updating tab title without recreation

Thread ID:

Created:

Updated:

Platform:

Replies:

129828 Apr 5,2017 11:48 AM UTC Apr 26,2017 07:32 AM UTC Angular 3
loading
Tags: ejTab
Me
Asked On April 5, 2017 11:48 AM UTC

Hey,

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


Karthikeyan Viswanathan [Syncfusion]
Replied On April 6, 2017 06:34 AM UTC

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>  


 


 
Regards,  
Karthikeyan V. 


Me
Replied On April 25, 2017 06:48 AM UTC

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

 tabObj.addItem(tabIdtabNametabCount+1nulltabId);

Karthikeyan Viswanathan [Syncfusion]
Replied On April 26, 2017 07:32 AM UTC

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>   


 
 


 
 
Regards,   
Karthikeyan V.  
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;