diff --git a/src/spec/tabset.component.spec.ts b/src/spec/tabset.component.spec.ts index aa839ed6ef..4b5b6fd518 100644 --- a/src/spec/tabset.component.spec.ts +++ b/src/spec/tabset.component.spec.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { TabsetConfig } from '../tabs/tabset.config'; import { TabsModule } from '../tabs/tabs.module'; @@ -18,15 +19,15 @@ const html = ` `; -function getTabTitles(nativeEl:HTMLElement):NodeListOf { +function getTabTitles(nativeEl: HTMLElement): NodeListOf { return nativeEl.querySelectorAll('.nav-link'); } -function getTabContent(nativeEl:HTMLElement):NodeListOf { +function getTabContent(nativeEl: HTMLElement): NodeListOf { return nativeEl.querySelectorAll('.tab-content .tab-pane'); } -function expectActiveTabs(nativeEl:HTMLElement, active:boolean[]):void { +function expectActiveTabs(nativeEl: HTMLElement, active: boolean[]): void { const tabTitles = getTabTitles(nativeEl); const tabContent = getTabContent(nativeEl); @@ -67,7 +68,7 @@ describe('Component: Tabs', () => { beforeEach(() => { TestBed.configureTestingModule({ declarations: [TestTabsetComponent], - imports: [TabsModule] + imports: [TabsModule.forRoot()] }); TestBed.overrideComponent(TestTabsetComponent, {set: {template: html}}); fixture = TestBed.createComponent(TestTabsetComponent); @@ -190,15 +191,19 @@ class TestTabsetComponent { {title: 'tab3', content: 'tab3 content', removable: true} ]; - public _select(e:TabsModule):TabsModule { + public constructor(config: TabsetConfig) { + Object.assign(this, config); + } + + public _select(e: TabsModule): TabsModule { return e; } - public _deselect(e:TabsModule):TabsModule { + public _deselect(e: TabsModule): TabsModule { return e; } - public _removed(e:TabsModule):TabsModule { + public _removed(e: TabsModule): TabsModule { return e; } } diff --git a/src/tabs/index.ts b/src/tabs/index.ts index 389c3dba58..3b04d516a0 100644 --- a/src/tabs/index.ts +++ b/src/tabs/index.ts @@ -3,3 +3,4 @@ export { TabsetComponent } from './tabset.component'; export { TabDirective } from './tab.directive'; export { TabsModule } from './tabs.module'; export { NgTranscludeDirective } from './ng-transclude.directive'; +export { TabsetConfig } from './tabset.config'; diff --git a/src/tabs/tabs.module.ts b/src/tabs/tabs.module.ts index 3d081e706e..6f72dcbbef 100644 --- a/src/tabs/tabs.module.ts +++ b/src/tabs/tabs.module.ts @@ -5,6 +5,7 @@ import { NgTranscludeDirective } from './ng-transclude.directive'; import { TabHeadingDirective } from './tab-heading.directive'; import { TabDirective } from './tab.directive'; import { TabsetComponent } from './tabset.component'; +import { TabsetConfig } from './tabset.config'; @NgModule({ imports: [CommonModule], @@ -15,7 +16,7 @@ export class TabsModule { public static forRoot(): ModuleWithProviders { return { ngModule: TabsModule, - providers: [] + providers: [TabsetConfig] }; } } diff --git a/src/tabs/tabset.component.ts b/src/tabs/tabset.component.ts index 105c4a905e..d2c80aa103 100644 --- a/src/tabs/tabset.component.ts +++ b/src/tabs/tabset.component.ts @@ -1,6 +1,7 @@ -import { Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core'; +import { Component, HostBinding, Input, OnDestroy } from '@angular/core'; import { TabDirective } from './tab.directive'; +import { TabsetConfig } from './tabset.config'; // todo: add active event to tab // todo: fix? mixing static and dynamic tabs position tabs in order of creation @Component({ @@ -24,7 +25,7 @@ import { TabDirective } from './tab.directive'; ` }) -export class TabsetComponent implements OnInit, OnDestroy { +export class TabsetComponent implements OnDestroy { @Input() public get vertical():boolean { return this._vertical; @@ -62,8 +63,8 @@ export class TabsetComponent implements OnInit, OnDestroy { protected _justified:boolean; protected _type:string; - public ngOnInit():void { - this.type = this.type !== 'undefined' ? this.type : 'tabs'; + public constructor(config: TabsetConfig) { + Object.assign(this, config); } public ngOnDestroy():void { @@ -127,7 +128,7 @@ export class TabsetComponent implements OnInit, OnDestroy { this.classMap = { 'nav-stacked': this.vertical, 'nav-justified': this.justified, - ['nav-' + (this.type || 'tabs')]: true + [`nav-${this.type}`]: true }; } } diff --git a/src/tabs/tabset.config.ts b/src/tabs/tabset.config.ts new file mode 100644 index 0000000000..685227587d --- /dev/null +++ b/src/tabs/tabset.config.ts @@ -0,0 +1,6 @@ +import { Injectable } from '@angular/core'; + +@Injectable() +export class TabsetConfig { + public type: string = 'tabs'; +}