In angular bootstrap tabs, how to cancel tab change?

Suppose that you have 3 tabs and want the third tab to be unclickable. Then you should add a deselect attribute to clickable tabs, so that when deselect event happens, they checked what tab we're trying to switch to and if it's the third tab, prevented tab switch.

This works only in later versions of ui-bootstrap, around 0.12-0.14, can't say exactly:

template.html

<uib-tabset class="tab-animation" active="activeTab">    <uib-tab index="0" heading="Overview" id="overview" deselect="checkTab($event, $selectedIndex)"></uib-tab>    <uib-tab index="1" heading="Details" id="details" deselect="checkTab($event, $selectedIndex)"></uib-tab>    <uib-tab index="2" heading="Download" id="download"></uib-tab></uib-tabset>

controller.js

// Downloads tab shouldn't be clickable$scope.checkTab = function($event, $selectedIndex) {    // $selectIndex is index of the tab, you're switching to    if ($selectedIndex == 2) { // last tab is non-switchable        $event.preventDefault();    }};

My solution to prevent the tab change was using the built in disabled flag. If you add an ng-click handler to the tab, you can still react to events. This works if the disabled styling is no problem for you - in your use case this might be the case.

<tab  disabled="true" ng-click="warnUserNotSavedChanges()">

Please use below code for this tabs solution, It's worked for me.

//our root app componentimport {Component, NgModule, VERSION} from '@angular/core'import {BrowserModule} from '@angular/platform-browser'import { TabsModule } from 'ngx-bootstrap';@Component({  selector: 'my-app',  template: `   <tabset>    <tab heading='Tab 1'>Tab 1 content</tab>    <tab>      <template tabHeading>        <div (click)="tryToSwitch($event)">          Tab 2        </div>      </template>      Tab 2 content    </tab>  </tabset>  `,})export class App {  tryToSwitch(e) {    let result = confirm('Are you sure?');    if(!result) {      e.stopPropagation();    }  }}@NgModule({  imports: [ BrowserModule, TabsModule.forRoot() ],  declarations: [ App ],  bootstrap: [ App ]})export class AppModule {}