title: How to prevent tab selection on ngx-bootstrap
body: <p>I have two tabs with ngx-bootstrap like bellow, and I want to programatically stop tab functionality rom working:</p>
  
  <pre><code>&lt;tabset&gt;
      &lt;tab heading="First"&gt;Tab 1 content&lt;/tab&gt;
      &lt;tab heading="Second"&gt;Tab 2 content&lt;/tab&gt;
  &lt;/tabset&gt;
  
  &lt;label&gt;Edit in progress: &lt;/label&gt;
  &lt;input type="checkbox" [(ngModel)]="isTabSwitchEnabled"&gt;
  </code></pre>
  
  <p>Basically, if I have a dirty form in, say, <strong>Tab 1</strong>, I want to popup a "Discard changes?" dialog before allowing the user to "navigate" to <strong>Tab 2</strong>. I see nothing on the ngx-bootstrap <a href="https://valor-software.com/ngx-bootstrap/#/tabs" rel="noreferrer">tabs API</a> that I could use.</p>
  
  <p>I have an example <a href="https://stackblitz.com/edit/ngx-bootstrap-tabs?file=app%2Fapp.component.ts" rel="noreferrer">Stackblitz</a> where I tried working with <code>[disabled]</code> on tabs, and it works partways, but not fully, because I cannot set the tab programatically active (or I don't know how):</p>
  
  <pre><code>export class MyComponent  {
    disableSwitching: boolean;
    @ViewChild('tabset') tabset: TabsetComponent;
    @ViewChild('first') first: TabDirective;
    @ViewChild('second') second: TabDirective;
  
    confirmTabSwitch($event) {
      if (this.disableSwitching) {
        const confirm = window.confirm('Discard changes and switch tab?');
        if (confirm) {
          this.disableSwitching = false;
          this.second.active = true;
        }
      }
    }
  
  }
  </code></pre>
  
  <p>The <code>this.second.active = true</code> doesn't switch to the new tab, only marks it active. The same if I try with <code>this.tabset.tabs[index].active = true;</code>.</p>
  
  <p>Is there a way to have this functionality? Enable and disable switching tabs? Ideally bind it to a router too (but I definitely need programatic access).</p>