Overview

Component a2-tabs is a collection of panels displayed horizontally.

Selector	Description
a2-tabs	Defines tabs component and its global configuration
a2-tab	Defines single tab panel

a2-tabs

Inputs

Input	Type	Default	Description
type	string	tabs	Defines tabs type class (nav-{type}). Allow to use Bootstrap 4 classes like "tabs" and "pills".
openedTab	string	N/A	Determines initially opened tab by name

Outputs

Output	Type	Description
tabChange	EventEmitter of TabChangeEvent	Emits TabChangeEvent when opened tab is changed.
contentChange	EventEmitter of Array<TabState>	Emits list of all available tabs every time when new tab is added or removed from DOM

a2-tab

Inputs

Input	Type	Default	Description
name	string	tab-{nextId}	Defines name of specific tab.
disabled	boolean	false	Determines if given tab is disabled

Templates

Selector	Description
template tabHeader	Allow to define tab header.
template tabFooter	Allow to define tab footer.

Types

export interface TabChangeEvent {
    prev: string;
    current: string;
}

export interface TabState {
    name: string;
    disabled: boolean;
}

Example

HTML:

<div class="card">
    <div class="card-header">
        <h2>Tabs</h2>
    </div>

    <div class="card-body card-padding">
        <input type="button" (click)="toggleTabVisibility()" value="Toggle visibility">
        <input type="button" (click)="tabs.open('a2')" value="Open 2nd tab">
        <input type="button" (click)="switchTypes()" value="Switch types">

        <a2-tabs #tabs openedTab="a1" [type]="type" (tabChange)="tabChange($event)"
                 (contentChange)="contentChange($event)">
            <a2-tab name="a1">
                <template tabHeader>Tab 1</template>
                <template tabBody>
                    <table class="table">
                        <tr>
                            <th>Firstname</th>
                            <th>Lastname</th>
                            <th>Age</th>
                        </tr>
                        <tr>
                            <td>Jill</td>
                            <td>Smith</td>
                            <td>50</td>
                        </tr>
                        <tr>
                            <td>Eve</td>
                            <td>Jackson</td>
                            <td>94</td>
                        </tr>
                    </table>
                </template>
            </a2-tab>
            <a2-tab name="a2" [disabled]="true">
                <template tabHeader>Tab 2</template>
                <template tabBody>
                    <table class="table">
                        <tr>
                            <th>Firstname</th>
                            <th>Lastname</th>
                            <th>Age</th>
                        </tr>
                        <tr>
                            <td>Dan</td>
                            <td>Smith</td>
                            <td>30</td>
                        </tr>
                        <tr>
                            <td>Ben</td>
                            <td>Jackson</td>
                            <td>64</td>
                        </tr>
                    </table>
                </template>
            </a2-tab>
            <a2-tab name="a3">
                <template tabHeader>Tab 3</template>
                <template tabBody>
                    <table class="table">
                        <tr>
                            <th>Firstname</th>
                            <th>Lastname</th>
                            <th>Age</th>
                        </tr>
                        <tr>
                            <td>Bill</td>
                            <td>Smith</td>
                            <td>54</td>
                        </tr>
                        <tr>
                            <td>Will</td>
                            <td>Jackson</td>
                            <td>34</td>
                        </tr>
                    </table>
                </template>
            </a2-tab>
            <a2-tab name="a4" *ngIf="visible">
                <template tabHeader>Tab 4</template>
                <template tabBody>
                    <table class="table">
                        <tr>
                            <th>Firstname</th>
                            <th>Lastname</th>
                            <th>Age</th>
                        </tr>
                        <tr>
                            <td>Bill</td>
                            <td>Smith</td>
                            <td>54</td>
                        </tr>
                        <tr>
                            <td>Will</td>
                            <td>Jackson</td>
                            <td>34</td>
                        </tr>
                    </table>
                </template>
            </a2-tab>
        </a2-tabs>

        Tabs state: 
        Change event: 
    </div>
</div>

TypeScript:

@Component({
    selector: "a2uie-tabs",
    templateUrl: "src/examples/bootstrap/tabs/tabs.example.component.html"
})
export class TabsExampleComponent {

    @ViewChild("tabs")
    tabs: Tabs;

    private lastTabChange: TabChangeEvent;
    private tabsStates: Array<TabState>;
    private visible: boolean = false;
    private type: string = "tabs";

    private toggleTabVisibility(): void {
        this.visible = !this.visible
    }

    private tabChange(event: TabChangeEvent): void {
        this.lastTabChange = event;
    }

    private contentChange(event: Array<TabState>): void {
        this.tabsStates = event;
        this.tabs.open(this.tabsStates.find(tab => !tab.disabled).name);
    }

    private switchTypes() {
        this.type = this.type === "tabs" ? "pills" : "tabs";
    }
}