extract ripple directive from the md tab link

angular · Nov 9, 2016 · f88baad · f88baad
1 parent 0b4a466
commit f88baad
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts b/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
@@ -25,7 +25,7 @@ export class MdTabNavBar {
 @Directive({
   selector: '[md-tab-link]',
 })
-export class MdTabLink extends MdRipple {
+export class MdTabLink {
   private _isActive: boolean = false;
 
   @Input()
@@ -40,7 +40,18 @@ export class MdTabLink extends MdRipple {
     }
   }
 
-  constructor(private _mdTabNavBar: MdTabNavBar, private _element: ElementRef) {
+  constructor(private _mdTabNavBar: MdTabNavBar, private _element: ElementRef) {}
+}
+
+/**
+ * Simple directive that extends the ripple and matches the selector of the MdTabLink. This
+ * adds the ripple behavior to nav bar labels.
+ */
+@Directive({
+  selector: '[md-tab-link]',
+})
+export class MdTabLinkRipple extends MdRipple {
+  constructor(private _element: ElementRef) {
     super(_element);
   }
 }
diff --git a/src/lib/tabs/tabs.ts b/src/lib/tabs/tabs.ts
@@ -26,7 +26,7 @@ import {
 } from '../core';
 import {MdTabLabel} from './tab-label';
 import {MdTabLabelWrapper} from './tab-label-wrapper';
-import {MdTabNavBar, MdTabLink} from './tab-nav-bar/tab-nav-bar';
+import {MdTabNavBar, MdTabLink, MdTabLinkRipple} from './tab-nav-bar/tab-nav-bar';
 import {MdInkBar} from './ink-bar';
 import {Observable} from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
@@ -35,7 +35,6 @@ import {MdRippleModule} from '../core/ripple/ripple';
 
 /** Used to generate unique ID's for each tab component */
 let nextId = 0;
-
 /** A simple change event emitted on focus or selection changes. */
 export class MdTabChangeEvent {
   index: number;
@@ -255,9 +254,9 @@ export class MdTabGroup {
 @NgModule({
   imports: [CommonModule, PortalModule, MdRippleModule],
   // Don't export MdInkBar or MdTabLabelWrapper, as they are internal implementation details.
-  exports: [MdTabGroup, MdTabLabel, MdTab, MdTabNavBar, MdTabLink],
+  exports: [MdTabGroup, MdTabLabel, MdTab, MdTabNavBar, MdTabLink, MdTabLinkRipple],
   declarations: [MdTabGroup, MdTabLabel, MdTab, MdInkBar, MdTabLabelWrapper,
-    MdTabNavBar, MdTabLink],
+    MdTabNavBar, MdTabLink, MdTabLinkRipple],
 })
 export class MdTabsModule {
   static forRoot(): ModuleWithProviders {