This repository is for demonstration purposes of how it can be implemented in Angular and is not maintaned. Please fork and maintain your own version of this repository.

ngx-tabs

Simple tabs control for your angular2 applications using bootstrap3. Does not depend of jquery. If you don't want to use it without bootstrap - simply create proper css classes. Please star a project if you liked it, or create an issue if you have problems with it.

Installation

1. Install npm module:

   npm install ngx-tabs --save

2. If you are using system.js you may want to add this into map and package config:

   {
       "map": {
           "ngx-tabs": "node_modules/ngx-tabs"
       },
       "packages": {
           "ngx-tabs": { "main": "index.js", "defaultExtension": "js" }
       }
   }

Usage

Import TabsModule in your app and start using a component:

<tabset [pills]="false" (onSelect)="doSomethingOnTabSelect($event)">
    <tab title="Tab title" [disabled]="false" [active]="true">
        <span *tabHeading>
            <b style="color: deepskyblue">Dynamic html</b> <i style="color: deeppink">tab heading</i>
        </span>
        Tab contents.
    </tab>
    ...
</tabset>

• <tabset> is a container for all tabs
  • [pills]="true|false" Specifies if bootstrap pills should be used instead of regular tabs
  • (onSelect)="doSomethingOnTabSelect($event)" Callback to be called when tab is being selected
• <tab> is a single tab item
  • title Simple tab title
  • [disabled]="true|false Indicates if current tab is enabled or disabled
  • <span *tabHeading>...</span> Allows to specify dynamic html content of the tab title
  • [active]="true|false" Specifies which tab should be active on init. By deafult the first tab will be active

Sample

import {Component} from "@angular/core";
import {TabsModule} from "ngx-tabs";

@Component({
    selector: "app",
    template: `
<div class="container">

    <!-- regular tabs -->
    <tabset>
        <tab title="About me">
            Its all about me.
        </tab>
        <tab title="Contacts">
            This is content of the contacts tab
        </tab>
        <tab title="Map" [disabled]="true">
            Content of the Map Tab
        </tab>
    </tabset>
    
    <br/><br/>
    
    <!-- tabs with custom heading templates -->
    <tabset>
        <tab>
            <span *tabHeading>
                <b style="color: deepskyblue">About</b> <i style="color: deeppink">me</i>
            </span>
            Its all about me.
        </tab>
        <tab>
            <span *tabHeading>
                <i style="color: deeppink">My</i> <b style="color: deepskyblue">contacts</b>
            </span>
            This is content of the contacts tab
        </tab>
        <tab title="Map">
            Content of the Map Tab
        </tab>
    </tabset>
    
    <br/><br/>
    
    <!-- pills tabs -->
    <tabset [pills]="true">
        <tab title="About me">
            Its all about me.
        </tab>
        <tab title="Contacts">
            This is content of the contacts tab
        </tab>
        <tab title="Map">
            Content of the Map Tab
        </tab>
    </tabset>

</div>
`
})
export class App {

}

@NgModule({
    imports: [
        // ...
        TabsModule
    ],
    declarations: [
        App
    ],
    bootstrap: [
        App
    ]
})
export class AppModule {

}

Take a look on samples in ./sample for more examples of usages.