npm i ngx-bootstrap

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import {  AlertModule } from 'ngx-bootstrap/alert'
import { TabsModule } from 'ngx-bootstrap/tabs';

@NgModule({
  imports:      [ BrowserModule, FormsModule, AlertModule.forRoot(), TabsModule.forRoot() ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import { AlertModule } from 'ngx-bootstrap/alert'

import { TabsModule } from 'ngx-bootstrap/tabs';

@NgModule({

imports: [ BrowserModule, FormsModule, AlertModule.forRoot(), TabsModule.forRoot() ],

declarations: [ AppComponent ],

bootstrap: [ AppComponent ]

})

export class AppModule { }

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { TabsetComponent, TabDirective } from 'ngx-bootstrap/tabs';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  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;
      }
    }
  }
  
}

import { Component, ViewChild } from '@angular/core';

import { TabsetComponent, TabDirective } from 'ngx-bootstrap/tabs';

@Component({

selector: 'my-app',

templateUrl: './app.component.html',

styleUrls: [ './app.component.css' ]

})

export class AppComponent {

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;

}

app.component.html

<alert type="success">
  <strong>Tabs!</strong> you can enable/disable tab switching with the button here.
</alert>

<label for="switcher">Disable tab switching: <input type="checkbox" [(ngModel)]="disableSwitching"></label>
<p>Tab switching is <strong>{{ disableSwitching ? 'disabled' : 'enabled ' }}</strong>.</p>
<hr>
<tabset (click)="confirmTabSwitch($event)" #tabset>
  <tab
    tab1
    heading="First tab"
    id="first"
    #first
    [disabled]="disableSwitching"
    >Tab 1 content</tab>

  <tab
    tab2
    heading="Second tab"
    id="second"
    select="!disableSwitching && second.active = true"
    #second
    [disabled]="disableSwitching"
    >Tab 2 content</tab>
</tabset>

Tabs! you can enable/disable tab switching with the button here.

</alert>

<label for="switcher">Disable tab switching: <input type="checkbox" [(ngModel)]="disableSwitching"></label>

Tab switching is {{ disableSwitching ? 'disabled' : 'enabled ' }}.

<hr>

<tab

tab1

heading="First tab"

id="first"

#first

[disabled]="disableSwitching"

>Tab 1 content</tab>

<tab

tab2

heading="Second tab"

id="second"

select="!disableSwitching && second.active = true"

#second

[disabled]="disableSwitching"

>Tab 2 content</tab>

</tabset>

Angular ngx-bootstrap Example to Build Bootstrap Multiple Tabs & Windows in Browser Using TS

FULL SOURCE CODE

Comments

Leave a Reply Cancel reply

Archives