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. Image for the cookie policy date

Updating tab title without recreation

Hey,

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


3 Replies

KV Karthikeyan Viswanathan Syncfusion Team 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 Me 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);


KV Karthikeyan Viswanathan Syncfusion Team 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.  
 


Loader.
Up arrow icon