title: How activate or not (nav tab) Bootstrap Twitter ( Angular 2 )
body: <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>