diff --git a/projects/bulma-app/src/app/app-routing.module.ts b/projects/bulma-app/src/app/app-routing.module.ts
index fd90fa6e..e7fafd03 100644
--- a/projects/bulma-app/src/app/app-routing.module.ts
+++ b/projects/bulma-app/src/app/app-routing.module.ts
@@ -9,6 +9,7 @@ import {ModelComponent} from './model/model.component';
import {IntroductionComponent} from './introduction/introduction.component';
import {GettingstartedComponent} from './gettingstarted/gettingstarted.component';
import { PanelComponent } from './panel/panel.component';
+import { TabComponent } from './tab/tab.component';
const routes: Routes = [
@@ -20,7 +21,8 @@ const routes: Routes = [
{ path: 'message', component: MessageComponent },
{ path: 'card', component: CardComponent },
{ path: 'model', component: ModelComponent },
- { path: 'panel', component: PanelComponent }
+ { path: 'panel', component: PanelComponent },
+ { path: 'tab', component: TabComponent }
];
@NgModule({
diff --git a/projects/bulma-app/src/app/app.component.html b/projects/bulma-app/src/app/app.component.html
index 387cb912..39b541e9 100644
--- a/projects/bulma-app/src/app/app.component.html
+++ b/projects/bulma-app/src/app/app.component.html
@@ -1,88 +1,84 @@
-
-
diff --git a/projects/bulma-app/src/app/app.module.ts b/projects/bulma-app/src/app/app.module.ts
index f391e131..0ae73c5c 100644
--- a/projects/bulma-app/src/app/app.module.ts
+++ b/projects/bulma-app/src/app/app.module.ts
@@ -18,6 +18,7 @@ import { ModelComponent } from './model/model.component';
import { IntroductionComponent } from './introduction/introduction.component';
import { GettingstartedComponent } from './gettingstarted/gettingstarted.component';
import { PanelComponent } from './panel/panel.component';
+import { TabComponent } from './tab/tab.component';
@NgModule({
@@ -31,7 +32,8 @@ import { PanelComponent } from './panel/panel.component';
ModelComponent,
IntroductionComponent,
GettingstartedComponent,
- PanelComponent
+ PanelComponent,
+ TabComponent
],
imports: [
BrowserModule,
diff --git a/projects/bulma-app/src/app/tab/tab.component.css b/projects/bulma-app/src/app/tab/tab.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/bulma-app/src/app/tab/tab.component.html b/projects/bulma-app/src/app/tab/tab.component.html
new file mode 100644
index 00000000..f85f9a28
--- /dev/null
+++ b/projects/bulma-app/src/app/tab/tab.component.html
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/projects/bulma-app/src/app/tab/tab.component.spec.ts b/projects/bulma-app/src/app/tab/tab.component.spec.ts
new file mode 100644
index 00000000..6c3b6236
--- /dev/null
+++ b/projects/bulma-app/src/app/tab/tab.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TabComponent } from './tab.component';
+
+describe('TabComponent', () => {
+ let component: TabComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ TabComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(TabComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/projects/bulma-app/src/app/tab/tab.component.ts b/projects/bulma-app/src/app/tab/tab.component.ts
new file mode 100644
index 00000000..ea061f97
--- /dev/null
+++ b/projects/bulma-app/src/app/tab/tab.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-tab',
+ templateUrl: './tab.component.html',
+ styleUrls: ['./tab.component.css']
+})
+export class TabComponent { }
diff --git a/projects/ngx-bulma/src/lib/tabs/index.ts b/projects/ngx-bulma/src/lib/tabs/index.ts
index 8f667fb9..1a04452f 100644
--- a/projects/ngx-bulma/src/lib/tabs/index.ts
+++ b/projects/ngx-bulma/src/lib/tabs/index.ts
@@ -1,2 +1,3 @@
export * from './tabs.component';
+export * from './tab-item/tab-item.component';
export * from './tabs.module';
diff --git a/projects/ngx-bulma/src/lib/tabs/tab-item/tab-item.component.css b/projects/ngx-bulma/src/lib/tabs/tab-item/tab-item.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/ngx-bulma/src/lib/tabs/tab-item/tab-item.component.html b/projects/ngx-bulma/src/lib/tabs/tab-item/tab-item.component.html
new file mode 100644
index 00000000..316dc7b0
--- /dev/null
+++ b/projects/ngx-bulma/src/lib/tabs/tab-item/tab-item.component.html
@@ -0,0 +1,6 @@
+
+
+ {{title}}
+
+
diff --git a/projects/ngx-bulma/src/lib/tabs/tab-item/tab-item.component.spec.ts b/projects/ngx-bulma/src/lib/tabs/tab-item/tab-item.component.spec.ts
new file mode 100644
index 00000000..930b3c73
--- /dev/null
+++ b/projects/ngx-bulma/src/lib/tabs/tab-item/tab-item.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TabItemComponent } from './tab-item.component';
+
+describe('TabItemComponent', () => {
+ let component: TabItemComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ TabItemComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(TabItemComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/projects/ngx-bulma/src/lib/tabs/tab-item/tab-item.component.ts b/projects/ngx-bulma/src/lib/tabs/tab-item/tab-item.component.ts
new file mode 100644
index 00000000..15f7ceab
--- /dev/null
+++ b/projects/ngx-bulma/src/lib/tabs/tab-item/tab-item.component.ts
@@ -0,0 +1,38 @@
+import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input, ChangeDetectorRef, AfterContentChecked } from '@angular/core';
+import { TabsService } from '../tabs.service';
+
+@Component({
+ selector: 'bu-tab-item',
+ templateUrl: './tab-item.component.html',
+ styleUrls: ['./tab-item.component.css'],
+ encapsulation: ViewEncapsulation.None,
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+
+export class TabItemComponent implements AfterContentChecked {
+
+ @Input() title: string;
+ public id = `bu-tab-item-${this.tabsService.getid()}`;
+ public selectedId: number;
+
+ constructor(private tabsService: TabsService, private ref: ChangeDetectorRef) {
+ this.tabsService.selectedId.subscribe(data => {
+ this.selectedId = data;
+ });
+ }
+
+ select(event, id) {
+ event.preventDefault();
+ const idSeparated = id.split('-');
+ this.tabsService.setSelectedId(this.getSelectedId(idSeparated));
+ }
+
+ getSelectedId(idSeparated) {
+ return idSeparated[idSeparated.length - 1];
+ }
+
+ ngAfterContentChecked() {
+ this.ref.detectChanges();
+ }
+
+}
diff --git a/projects/ngx-bulma/src/lib/tabs/tabs.component.html b/projects/ngx-bulma/src/lib/tabs/tabs.component.html
index 867a5831..8aae2290 100644
--- a/projects/ngx-bulma/src/lib/tabs/tabs.component.html
+++ b/projects/ngx-bulma/src/lib/tabs/tabs.component.html
@@ -1 +1,5 @@
-bulma-tabs works!
+
diff --git a/projects/ngx-bulma/src/lib/tabs/tabs.component.ts b/projects/ngx-bulma/src/lib/tabs/tabs.component.ts
index 91e4a9aa..a563d5c1 100644
--- a/projects/ngx-bulma/src/lib/tabs/tabs.component.ts
+++ b/projects/ngx-bulma/src/lib/tabs/tabs.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation, ChangeDetectionStrategy, ContentChildren, QueryList } from '@angular/core';
@Component({
selector: 'bu-tabs',
@@ -7,11 +7,5 @@ import { Component, OnInit, ViewEncapsulation, ChangeDetectionStrategy } from '@
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
-export class BulmaTabsComponent implements OnInit {
-
- constructor() { }
-
- ngOnInit() {
- }
-
+export class BulmaTabsComponent {
}
diff --git a/projects/ngx-bulma/src/lib/tabs/tabs.module.ts b/projects/ngx-bulma/src/lib/tabs/tabs.module.ts
index 6f3d7caa..0b528514 100644
--- a/projects/ngx-bulma/src/lib/tabs/tabs.module.ts
+++ b/projects/ngx-bulma/src/lib/tabs/tabs.module.ts
@@ -1,14 +1,15 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BulmaTabsComponent } from './tabs.component';
-
-
+import { TabItemComponent } from './tab-item/tab-item.component';
+import { TabsService } from './tabs.service';
@NgModule({
- declarations: [BulmaTabsComponent],
+ declarations: [BulmaTabsComponent, TabItemComponent],
imports: [
CommonModule
],
- exports: [BulmaTabsComponent]
+ exports: [BulmaTabsComponent, TabItemComponent],
+ providers: [TabsService]
})
export class BulmaTabsModule { }
diff --git a/projects/ngx-bulma/src/lib/tabs/tabs.service.spec.ts b/projects/ngx-bulma/src/lib/tabs/tabs.service.spec.ts
new file mode 100644
index 00000000..87b1c4e8
--- /dev/null
+++ b/projects/ngx-bulma/src/lib/tabs/tabs.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { TabsService } from './tabs.service';
+
+describe('TabsService', () => {
+ beforeEach(() => TestBed.configureTestingModule({}));
+
+ it('should be created', () => {
+ const service: TabsService = TestBed.get(TabsService);
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/projects/ngx-bulma/src/lib/tabs/tabs.service.ts b/projects/ngx-bulma/src/lib/tabs/tabs.service.ts
new file mode 100644
index 00000000..75db3963
--- /dev/null
+++ b/projects/ngx-bulma/src/lib/tabs/tabs.service.ts
@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class TabsService {
+ public nextid = 1;
+ public selectedId = new BehaviorSubject(null);
+ constructor() { }
+
+ getid() {
+ return this.nextid++;
+ }
+
+ setSelectedId(id) {
+ this.selectedId.next(id);
+ }
+}