fix(top-app-bar): Should destroy ripple (#1355)

Author: trimox

packages/top-app-bar/top-app-bar.directives.ts

@@ -3,7 +3,8 @@ import {
   Component,
   Directive,
   ElementRef,
-  Input
+  Input,
+  OnDestroy
 } from '@angular/core';
 import { MdcRipple } from '@angular-mdc/web/ripple';
 
@@ -50,13 +51,17 @@ export class MdcTopAppBarSection {
   },
   providers: [MdcRipple]
 })
-export class MdcTopAppBarActionItem {
+export class MdcTopAppBarActionItem implements OnDestroy {
   constructor(
     public elementRef: ElementRef<HTMLElement>,
     private _ripple: MdcRipple) {
 
     _ripple.attachTo(this.elementRef.nativeElement, true);
   }
+
+  ngOnDestroy(): void {
+    this._ripple.destroy();
+  }
 }
 
 @Directive({
@@ -68,7 +73,7 @@ export class MdcTopAppBarActionItem {
   },
   providers: [MdcRipple]
 })
-export class MdcTopAppBarNavigationIcon {
+export class MdcTopAppBarNavigationIcon implements OnDestroy {
   constructor(
     public elementRef: ElementRef<HTMLElement>,
     private _ripple: MdcRipple) {
@@ -80,6 +85,10 @@ export class MdcTopAppBarNavigationIcon {
   getHostElement() {
     return this.elementRef.nativeElement;
   }
+
+  ngOnDestroy(): void {
+    this._ripple.destroy();
+  }
 }
 
 @Directive({