title: How to refresh the angular content after changing the active bootstrap tab?
body: <p>I have a component that shows several tabs but depending on the logic of the business it will be active one or the other, something like this:</p>
  
  <pre><code>&lt;ul class="nav nav-tabs"&gt;
      &lt;li *ngIf="activateTab1" class="active"&gt;&lt;a data-toggle="tab" href="#tab1"&gt;
        &lt;span class="fa fa-home fa-lg color-blue "&gt;&lt;/span&gt; tab1&lt;/a&gt;&lt;/li&gt;
      &lt;li *ngIf="!activateTab1"&gt;&lt;a data-toggle="tab" href="#tab1"&gt;
        &lt;span class="fa fa-home fa-lg color-blue "&gt;&lt;/span&gt; tab1&lt;/a&gt;&lt;/li&gt;
  
      &lt;li *ngIf="activateTab2" class="active"&gt;&lt;a data-toggle="tab" href="#tab1"&gt;
        &lt;span class="fa fa-home fa-lg color-blue "&gt;&lt;/span&gt; tab2&lt;/a&gt;&lt;/li&gt;
      &lt;li *ngIf="!activateTab2"&gt;&lt;a data-toggle="tab" href="#tab2"&gt;
        &lt;span class="fa fa-home fa-lg color-blue "&gt;&lt;/span&gt; tab1&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div class="tab-content"&gt;
      &lt;div id="tab1" class="tab-pane fade"&gt;
        &lt;app-component-tab1&gt;&lt;/app-component-tab1&gt;
      &lt;/div&gt;
      &lt;div id="tab2" class="tab-pane fade"&gt;
        &lt;app-component-tab2&gt;&lt;/app-component-tab2&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>With this code the tab is activated correctly but the content of the tab (which is an angular component) is not recharged. I think it may be because the tab is not being clicked and the "href" is not called. So how could I do this? Thanks in advance.</p>