How activate or not (nav tab) Bootstrap Twitter ( Angular 2 )
<p>I have a nav, Twitter Bootstrap, inside one of the tab <code>(#B ..)</code>, I have an image that tapping it changes to another tab <code>(#C ..)</code>.</p>

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

<pre class="lang-html prettyprint-override"><code>&lt;ul class="nav nav-tabs"&gt;
    &lt;li class="nav active"&gt; &lt;a [attr.href]="'#A' + cObj" data-toggle="tab"&gt; Info &lt;/a&gt;&lt;/li&gt;
    &lt;li class="nav"&gt;        &lt;a [attr.href]="'#B' + cObj" data-toggle="tab"&gt; Info &lt;/a&gt;&lt;/li&gt;
    &lt;li class="nav"&gt;        &lt;a [attr.href]="'#C' + cObj" data-toggle="tab"&gt; Info &lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>



<hr>

<pre><code>&lt;div class="tab-pane fade"           [id]="'B' + cObj"&gt;
..//

&lt;a [attr.href]="'#C' + cObj" data-toggle="tab"&gt;
&lt;img...&gt;
..//
</code></pre>

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

<p>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</p>

<hr>

<p><strong>UPDATE:</strong> I'm solved using the following.</p>

<p>Perhaps the response from users help others better:</p>

<ul>
<li><p><a href="https://plnkr.co/edit/CcUYzN4b5yudnF4QqAox?p=preview" rel="nofollow noreferrer">Thierry Templier</a></p></li>
<li><p><a href="https://stackoverflow.com/questions/35550988/how-activate-or-not-nav-tab-bootstrap-twitter-angular-2#35551143">Sasxa</a></p></li>
<li><p><a href="https://stackoverflow.com/questions/35550988/how-activate-or-not-nav-tab-bootstrap-twitter-angular-2#35551054">Günter Zöchbauer</a></p></li>
</ul>

<hr>

<pre class="lang-html prettyprint-override"><code>&lt;ul class="nav nav-tabs"&gt;
    &lt;li class="nav active" [id]="'IDA' + contadorObjet.name" [class.active]="testLocation1() == ('A' + contadorObjet.name) || '10'" &gt;       &lt;a [attr.href]="'#A' + contadorObjet.name" data-toggle="tab"&gt; Info &lt;/a&gt;&lt;/li&gt;
    &lt;li class="nav"        [id]="'IDB' + contadorObjet.name" [class.active]="testLocation1() == 'B' + contadorObjet.name"&gt;                  &lt;a [attr.href]="'#B' + contadorObjet.name" data-toggle="tab"&gt; Info &lt;/a&gt;&lt;/li&gt;
    &lt;li class="nav"        [id]="'IDC' + contadorObjet.name" [class.active]="testLocation1() == 'C' + contadorObjet.name"&gt;                  &lt;a [attr.href]="'#C' + contadorObjet.name" data-toggle="tab"&gt; Info &lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>



<p>NOTE:'10' is ID parent for test</p>

<hr>

<pre><code>&lt;a [attr.href]="'#C' + contadorObjet.name" data-toggle="tab" 
   #elem (click)="testLocationAct(elem.href, 'IDB' + contadorObjet.name)" &gt;
</code></pre>

<hr>

<pre><code>    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;
    }
</code></pre>

<p><strong>UPDATE:</strong></p>

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

<p><kbd><a href="https://plnkr.co/edit/CcUYzN4b5yudnF4QqAox?p=preview" rel="nofollow noreferrer">Plunker</a></kbd></p>

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

<pre class="lang-html prettyprint-override"><code>&lt;div class="container" *ngFor="#contadorObjeto of contadorObjetos ; #contadorObjetoI = index" nginit="test='#' id=10"&gt;

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

              &lt;div class="tab-content"&gt;

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

                &lt;div class="tab-pane fade in " [id]="'B' + contadorObjeto.name"&gt;Content inside tab B 
                  &lt;a [attr.href]="'#C' + contadorObjeto.name" data-toggle="tab" #elem (click)="testLocationAct(elem.href, 'IDB' + contadorObjeto.name)" &gt;
                      &lt;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" /&gt;
                  &lt;/a&gt;
                &lt;/div&gt;

                &lt;div class="tab-pane fade in " [id]="'C' + contadorObjeto.name"&gt;Content inside tab C 
                &lt;/div&gt;
              &lt;/div&gt;    

            &lt;/div&gt;
</code></pre>



<hr>

<pre><code>    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);
    }
</code></pre>

<p>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.</p>

<p>I hope to help you.</p>