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:

``json
{
"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:

`html



Dynamic html tab heading

Tab contents.

...

`

* 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
* is a single tab item
* title Simple tab title
* [disabled]="true|false Indicates if current tab is enabled or disabled
tabHeading>... Allows to specify dynamic html content of the tab title

Sample

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

@Component({
selector: "app",
template:

Its all about me.


This is content of the contacts tab


Content of the Map Tab











About me

Its all about me.



My contacts

This is content of the contacts tab


Content of the Map Tab










Its all about me.


This is content of the contacts tab


Content of the Map Tab


})
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.