NG Tabs

An easy tabs implementation for Angular.

A demo can be found here

Installation

To install this library, run:

$ npm install --save @jaspero/ng-tabs

Setup

Import JasperoTabsModule in your @NgModule:

@NgModule({
    imports: [
        JasperoTabsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {}

Then create the component in a root component (you can create it anywhere but you can only use it in that component on any lower ones).

How To Use

You can use any of a following will approaches:

<jaspero-tabs>
  <jaspero-tab [tabTitle]="templateRef">Content 1</jaspero-tab>
  <jaspero-tab [tabTitle]="'<p>example 2</p>'">Content 2</jaspero-tab>
  <jaspero-tab tabTitle="example 3">Content 3</jaspero-tab>
</jaspero-tabs>
<ng-template #templateRef>
  <p>This is an example</p>
</ng-template>

Options

Available inputs:

tabTitle: string | TemplateRef<any> = 'Tab'; // default value is 'Tab'
active: boolean // defaults to the first if no tabs are active
disabled: boolean // default value is false. Prevents tab from being toggled

Note:

The tabTitle input can be a string or a TemplateRef.

FAQ

Does this library support AoT?

Yes AoT is supported.

Development

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build

To lint all *.ts files:

$ npm run lint

License

MIT © Jaspero co.