Angular2 - Two-way data binding on class attribute

Question

I am using twitter bootstrap tabs and I want to keep track of the active class that is applied to the li tag as the user toggles different tabs. I am keeping track of class attribute because I want to activate tabs through my own custom buttons by changing class attribute to activate from the code. I am using the following code to achieve this:

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';

@Component({
  selector: 'app',
  template: `
  <div class="container-fluid" >
    <ul class="nav nav-tabs" >
      <li *ngFor="#tab of tabs"  [(class)]="tab.class" ><a href="#{{tab.id}}" data-toggle="tab" >{{tab.id}}</a></li>
    </ul>
    <div class="tab-content">
      <div *ngFor="#tab of tabs" [(class)]="tab.contentClass" [id]="tab.id" >{{tab.id}} content goes here.</div>
    </div>
  </div>
  <button (click)="openTab('tab1')" >Tab 1 Button</button>
  <button (click)="openTab('tab2')" >Tab 2 Button</button>
  `
})
class MainApp{
  public tabs = [
    {class: "active", id: "tab1", contentClass:"tab-pane active"},
    {class: "", id: "tab2", contentClass:"tab-pane"}
  ]

  openTab(id){
    var tabToActivate;
    for(var i=0;i<this.tabs.length;i++){
      if(this.tabs[i].id == id)
        tabToActivate = this.tabs[i];
      this.tabs[i].class = "";
      this.tabs[i].contentClass = "tab-pane";
    }

    tabToActivate.class = "active";
    tabToActivate.contentClass = "tab-pane active";
  }
}
bootstrap(MainApp);

but it seems that as I toggle through different tabs the binding gets break or something and the customized tab buttons doesn't work for a moment. Why is this happening?

I re-produced the problem on plunkr here

click tab2

click Tab Button 1 - doesn't work.

Any thoughts?

micronyks · Accepted Answer · 2016-04-02 14:26:34Z

1

I found some logic error in your plunker. Now, check below code and working plunker (according to your way of coding).

working demo

<ul class="nav nav-tabs" >
      <li *ngFor="#tab of tabs"  (click)="openTab(tab.id)" [(class)]="tab.class" ><a href="#{{tab.id}}" data-toggle="tab" >{{tab.id}}. {{tab.class}}</a></li>
</ul>

openTab(id){        
    for(var i=0;i<this.tabs.length;i++){
      console.log('started' + id);
      if(this.tabs[i].id != id)
      {   
        this.tabs[i].class = ""; 
        this.tabs[i].contentClass = "tab-pane";
      }
      else
      {
        this.tabs[i].class = "active"; 
        this.tabs[i].contentClass = "tab-pane active";
      }
    }
}

edited Apr 2, 2016 at 14:26

answered Apr 2, 2016 at 14:06

micronyks

55.7k17 gold badges122 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eesa Over a year ago

thanks it worked. All I had to do was to add (click)="openTab(tab.id)" to the li tag.

Halil Özgür · Accepted Answer · 2017-09-13 20:15:47Z

0

I would use ngClass instead:

<li *ngFor="#tab of tabs" 
      [ngClass]="{active: tab.active}">...</li>

The active property must be true or false according if the tab i's active or not.

See this link: https://v2.angular.io/docs/js/latest/api/common/index/NgClass-directive.html.

edited Sep 13, 2017 at 20:15

Halil Özgür

16k6 gold badges51 silver badges58 bronze badges

answered Apr 2, 2016 at 12:19

Thierry Templier

203k44 gold badges407 silver badges366 bronze badges

2 Comments

Eesa Over a year ago

That's a new way for me to do it. I was hopping that it would work but unfortunately it still doesn't work. If it's working for you can you please produce a plunker or something? thanks

Thierry Templier Over a year ago

It should ;-) What is your behavior? The active flag is correctly updated for tabs? You could display them as an hint in your page. Is the class added. You could have a look in dev tools.

Collectives™ on Stack Overflow

Angular2 - Two-way data binding on class attribute

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related