How activate or not (nav tab) Bootstrap Twitter ( Angular 2 )

Question

I have a nav, Twitter Bootstrap, inside one of the tab (#B ..), I have an image that tapping it changes to another tab (#C ..).

I can change that tab, but I can not, that the new tab (#C ..) is set to active. And where this picture tab (#B ..) is set to deactivate. (for example removeClass active)

<ul class="nav nav-tabs">
    <li class="nav active"> <a [attr.href]="'#A' + cObj" data-toggle="tab"> Info </a></li>
    <li class="nav">        <a [attr.href]="'#B' + cObj" data-toggle="tab"> Info </a></li>
    <li class="nav">        <a [attr.href]="'#C' + cObj" data-toggle="tab"> Info </a></li>
</ul>

---

<div class="tab-pane fade"           [id]="'B' + cObj">
..//

<a [attr.href]="'#C' + cObj" data-toggle="tab">
<img...>
..//

I tried with [class.active] =" false " using it in various ways, for example [ '#B' + cObj.class.active] =" false " so but I can not, anything to help me.

I would like to be able to activate and deactivate the tab, switching from one to another, I'm sorry for my bad English I hope you understand my question

---

UPDATE: I'm solved using the following.

Perhaps the response from users help others better:

• Thierry Templier

• Sasxa

• Günter Zöchbauer

---

<ul class="nav nav-tabs">
    <li class="nav active" [id]="'IDA' + contadorObjet.name" [class.active]="testLocation1() == ('A' + contadorObjet.name) || '10'" >       <a [attr.href]="'#A' + contadorObjet.name" data-toggle="tab"> Info </a></li>
    <li class="nav"        [id]="'IDB' + contadorObjet.name" [class.active]="testLocation1() == 'B' + contadorObjet.name">                  <a [attr.href]="'#B' + contadorObjet.name" data-toggle="tab"> Info </a></li>
    <li class="nav"        [id]="'IDC' + contadorObjet.name" [class.active]="testLocation1() == 'C' + contadorObjet.name">                  <a [attr.href]="'#C' + contadorObjet.name" data-toggle="tab"> Info </a></li>
</ul>

NOTE:'10' is ID parent for test

---

<a [attr.href]="'#C' + contadorObjet.name" data-toggle="tab" 
   #elem (click)="testLocationAct(elem.href, 'IDB' + contadorObjet.name)" >

---

    testLocation1():string{
      //alert(document.activeElement.toString().split(/#(.+)?/)[1]);
      return document.activeElement.toString().split(/#(.+)?/)[1];
    }

    testLocationAct(test: any, test1: any){

      document.getElementById(test1).classList.remove('active');
      document.activeElement = test;
    }

UPDATE:

Can you add a plunker to this. I am trying a side bar data-toggle and it is not working – Gary

Plunker

before it worked well for what I wanted it, after posting this, I made some changes now works better (I think).

<div class="container" *ngFor="#contadorObjeto of contadorObjetos ; #contadorObjetoI = index" nginit="test='#' id=10">

              <ul class="nav nav-tabs">
                <li class="nav active" [id]="'IDA' + contadorObjeto.name" ([class.active])="testLocation1() == ('A' + contadorObjeto.name) || '10'">        <a [attr.href]="'#A' + contadorObjeto.name" data-toggle="tab"> Info </a></li>
                <li class="nav"        [id]="'IDB' + contadorObjeto.name" ([class.active])="testLocation1() == 'B' + contadorObjeto.name">                  <a [attr.href]="'#B' + contadorObjeto.name" data-toggle="tab"> Info </a></li>
                <li class="nav"        [id]="'IDC' + contadorObjeto.name" ([class.active])="testLocation1() == 'C' + contadorObjeto.name">                  <a [attr.href]="'#C' + contadorObjeto.name" data-toggle="tab"> Info </a></li>
              </ul>

              <div class="tab-content">

                <div class="tab-pane fade in active" [id]="'A' + contadorObjeto.name">Content inside tab A
                  {{ contadorObjeto.name }}
                </div>

                <div class="tab-pane fade in " [id]="'B' + contadorObjeto.name">Content inside tab B 
                  <a [attr.href]="'#C' + contadorObjeto.name" data-toggle="tab" #elem (click)="testLocationAct(elem.href, 'IDB' + contadorObjeto.name)" >
                      <img class="img-responsive"
                      height = "230" width = "230"
                      src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Free_logo.svg/200px-Free_logo.svg.png" />
                  </a>
                </div>

                <div class="tab-pane fade in " [id]="'C' + contadorObjeto.name">Content inside tab C 
                </div>
              </div>    

            </div>

---

    testLocation1():string{
      //alert(document.activeElement.toString().split(/#(.+)?/)[1]);
      return document.activeElement.toString().split(/#(.+)?/)[1];
    }

    testLocationAct(test: any, test1: any){

      liNavID = "ID" + test.toString().split(/#(.+)?/)[1];

      document.getElementById(test1).classList.remove('active');
      document.getElementById(liNavID).classList.add('active');

      //console.log(liNavID);
    }

I have adapted the sample, the new code to make it look similar to the previous.You can click on the image inside the tab 2 to test.

I hope to help you.

Answer 1

I would create an array containing all your nav elements. A nav element would have an active property.

You nav elements would be created with a loop:

<ul class="nav nav-tabs">
  <li *ngFor="#tab of tabs" class="nav active"
      [ngClass]="{active:tab.active}">
    <a> Info </a></li>
</ul>

When you click on a nav you will execute this method

selectNav(nav) {
  this.navs.forEach((nav) => {
    nav.active = false;
  });
  nav.active = true;
}

This method will be linked to nav elements like this:

<ul class="nav nav-tabs">
  <li ngFor="#tab of tabs" (...)>
    <a (click)="selectNav(nav)>
      Info
    </a>
  </li>
</ul>

I think that this article could help you:

• Developing a tabs component in Angular 2 - http://blog.thoughtram.io/angular/2015/04/09/developing-a-tabs-component-in-angular-2.html

Answer 2

You can do it like this (change "cObj == 'A'" to whatever you need):

<li class="nav" [class.active]="cObj == 'A'"> <a [attr.href]="'#A' + cObj"> Info </a></li>
<li class="nav" [class.active]="cObj == 'B'"> <a [attr.href]="'#B' + cObj"> Info </a></li>

Answer 3

if using router, set .router-link-active class

//our root app component
import {Component} from 'angular2/core'
import {RouteConfig, ROUTER_DIRECTIVES} from "angular2/router";

@Component({
  template: "<h1>First component</h1>"
})
export class FirstComponent { }



@Component({
  template: "<h1>Second component</h1>"
})
export class SecondComponent { }



@Component({
  template: "<h1>Third component</h1>"
})
export class ThirdComponent { }



@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
    <ul>
      <li>
        <a [routerLink]="['First']">First</a>
      </li>
      <li>
        <a [routerLink]="['Second']">Second</a>
      </li>
      <li>
        <a [routerLink]="['Third']">Third</a>
      </li>
    </ul>
    </div>
    <router-outlet></router-outlet>
  `,
  styles: [".router-link-active { background-color: red; }"],
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
    { path: "/first", name: "First", component: FirstComponent, useAsDefault: true },
  { path: "/second", name: "Second", component: SecondComponent },
  { path: "/third", name: "Third", component: ThirdComponent }
])
export class AppComponent { }

full code: https://github.com/guyoung/GyPractice-Angular2Advanced/tree/master/apps/router_link_active

Answer 4

You can't have dynamically built property names. Use ngClass instead

<li ngClass="{'active': isActive}">

See also:
- https://angular.io/docs/ts/latest/api/common/NgClass-directive.html
- https://stackoverflow.com/a/33713824/217408