1 files changed, 41 insertions, 0 deletions
diff --git a/src/angular/tabs/tabs.component.ts b/src/angular/tabs/tabs.component.ts
new file mode 100644
index 0000000..595f304
--- /dev/null
+++ b/src/angular/tabs/tabs.component.ts
@@ -0,0 +1,41 @@
+import { Component, Input, AfterContentInit, ContentChildren, QueryList, HostBinding } from '@angular/core';
+import { TabComponent } from './children/tab.component';
+import { SvgIconComponent } from "./../../../src/angular/svg-icon/svg-icon.component";
+import { Mode, Placement, Size } from './../common/enums';
+import template from "./tabs.component.html";
+
+@Component({
+    selector: 'sdc-tabs',
+    template: template
+})
+
+export class TabsComponent implements AfterContentInit {
+
+    @HostBinding('class') classes = 'sdc-tabs sdc-tabs-header';
+    @ContentChildren(TabComponent) private tabs: QueryList<TabComponent>;
+
+    public _size = Size.medium;
+
+    public selectTab(tab: TabComponent) {
+      // deactivate all tabs
+      this.tabs.toArray().forEach((_tab: TabComponent) => {
+        _tab.active = false;
+        _tab.titleIconMode = Mode.secondary;
+      });
+
+      // activate the tab the user has clicked on.
+      tab.active = true;
+      tab.titleIconMode = Mode.primary;
+    }
+
+    public ngAfterContentInit() {
+        // get all active tabs
+        const activeTabs = this.tabs.filter((tab) => tab.active);
+
+        // if there is no active tab set, activate the first
+        if (activeTabs.length === 0) {
+            this.selectTab(this.tabs.first);
+        }
+    }
+
+  }