@stejnar/tabs

Angular component library for reusable tab views. Components are agnostic but can be extended for styling or to reduce the DOM tree. The Service allows tabs to be nested and remember the latest tab.

Build with lib-starter: https://github.com/Stejnar/lib-starter

npm package: https://www.npmjs.com/package/@stejnar/tabs

Installation

1. $ npm install --save @stejnar/tabs --production
2. Include in Webpack or SystemJS

Components

1. TabsComponent

<tabs> @Input name: string

• Identifier - must be unique.

addTab(tab: Tab): void

• Registers this instance of Tab on the parent or TabsComponent.
• tab: Instance of TabComponent.

selectTab(tab: Tab): void

• Finds the given tab and sets its state to active.
• tab: Instance of TabComponent.

2. TabComponent

<tab> @Input name: string

• Identifier - must be unique.

@Input title: string

• Title to be displayed in a h4.

3. TabsService

registerStateProvider(name: string): BehaviorSubject

• Returns a BehaviourSubject, that can be subscribed to get the current tab.
• name: TabsComponent identifier

setTab(providerName: string, tabName: string, provider?: StateProvider): void

• Pushes the new state of this tab to the subscription of this provider.
• providerName: TabsComponent identifier.
• tabName: TabComponent identifier.
• provider: There is no implementation to get a provider, therefore it's only used private.

Usage

Out of the box:

<tabs name="diet">
    <tab name="fruits" title="I am a fruitarian!">
        ...
    </tab>
    <tab name="veggie" title="I am a veggie!">
        ...
    </tab>
    <tab name="meat" title="I am a meatboy!">
        ...
    </tab>
</tabs>

Extend components:

ParentComponent:

@Component({
    selector: 'parent-component',
    template: `
        <child-component></child-component>
        <child-component></child-component>
    `
})
export class ParentComponent extends TabsComponent {
    name: string = 'custom';
    constructor(tabsService: TabsService) {
        super(tabsService);
    }
    ...
}

ChildComponent:

@Component({
    selector: 'child-component',
    template: `
        <h4>{{ title }}</h4>
        <ng-content></ng-content>
    `,
    host: {
        '[style.display]': 'active ? "block" : "none"'
    }
})
export class ChildComponent extends TabComponent {
    name: string  = "child1";
    title: string = "I am a custom component!";

    constructor(tabs: ParentComponent, tabsService: TabsService) {
        super(tabs, tabsService);
    }
    ...
}

Note:

host: {
    '[style.display]': 'active ? "block" : "none"'
}

This is one of multiple approaches! You could also give it a class with ngClass directive, which allows CSS transitions or implement @angular/animations directly into the class. Although there is also the good ol' *ngIf directive.

Future Possibilities

1. Time travel through states
2. ...

Any suggestions? Contact me or collaborate! Send an e-mail to: [email protected]

Demo

1. Fork the git repository and clone it with:

   $ git clone https://github.com/Stejnar/stejnar-tabs.git

2. Start the build process and go to localhost:

   $ cd stejnar-tabs-master
   $ npm install
   $ npm run build:example
   $ npm start