5 files changed, 19 insertions, 19 deletions
diff --git a/src/angular/tabs/children/tab.component.html.ts b/src/angular/tabs/children/tab.component.html.ts
index 36ff413..cff7a8c 100644
--- a/src/angular/tabs/children/tab.component.html.ts
+++ b/src/angular/tabs/children/tab.component.html.ts
@@ -1,4 +1,4 @@
-export default `
+export const template = `
 <div [hidden]="!active" class="sdc-tab-content" role="tabpanel">
     <ng-content></ng-content>
 </div>
diff --git a/src/angular/tabs/children/tab.component.ts b/src/angular/tabs/children/tab.component.ts
index 3b96e87..a289aab 100644
--- a/src/angular/tabs/children/tab.component.ts
+++ b/src/angular/tabs/children/tab.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { Mode } from './../../common/enums';
-import template from "./tab.component.html";
+import { template } from "./tab.component.html";
 
 @Component({
   selector: 'sdc-tab',
diff --git a/src/angular/tabs/tabs.component.html.ts b/src/angular/tabs/tabs.component.html.ts
index 2333b86..ac82dd6 100644
--- a/src/angular/tabs/tabs.component.html.ts
+++ b/src/angular/tabs/tabs.component.html.ts
@@ -1,4 +1,4 @@
-export default `
+export const template = `
 <ul class="sdc-tabs-list" role="tablist">
     <li *ngFor="let tab of tabs" class="sdc-tab" role="tab" (click)="selectTab(tab)" [class.sdc-tab-active]="tab.active">
         <span *ngIf="tab.title">{{tab.title}}</span>
diff --git a/src/angular/tabs/tabs.component.ts b/src/angular/tabs/tabs.component.ts
index 595f304..c3b6507 100644
--- a/src/angular/tabs/tabs.component.ts
+++ b/src/angular/tabs/tabs.component.ts
@@ -1,8 +1,7 @@
-import { Component, Input, AfterContentInit, ContentChildren, QueryList, HostBinding } from '@angular/core';
+import { Component, Input, AfterContentInit, ContentChildren, QueryList, HostBinding, EventEmitter, Output } 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";
+import { Mode, Size } from './../common/enums';
+import { template } from "./tabs.component.html";
 
 @Component({
     selector: 'sdc-tabs',
@@ -12,20 +11,22 @@ import template from "./tabs.component.html";
 export class TabsComponent implements AfterContentInit {
 
     @HostBinding('class') classes = 'sdc-tabs sdc-tabs-header';
-    @ContentChildren(TabComponent) private tabs: QueryList<TabComponent>;
+    @ContentChildren(TabComponent) public tabs: QueryList<TabComponent>;
+    @Output() public selectedTab: EventEmitter<TabComponent> = new EventEmitter<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;
+        this.selectedTab.emit(tab);
+        // 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() {
@@ -38,4 +39,4 @@ export class TabsComponent implements AfterContentInit {
         }
     }
 
-  }
+}
diff --git a/src/angular/tabs/tabs.module.ts b/src/angular/tabs/tabs.module.ts
index 107942d..6b42c0e 100644
--- a/src/angular/tabs/tabs.module.ts
+++ b/src/angular/tabs/tabs.module.ts
@@ -1,6 +1,5 @@
 import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
-import { FormElementsModule } from "../form-elements/form-elements.module";
 import { TabsComponent } from "./tabs.component";
 import { TabComponent } from './children/tab.component';
 import { SvgIconModule } from './../svg-icon/svg-icon.module';