fix(material-experimental/mdc-chips): avoid unnecessary change detections

Avoids running the `transitionend` inside the `NgZone` for the MDC-based `mat-chip` since it fires a lot and it doesn't need to trigger change detection.

Author: crisbeto

src/material-experimental/mdc-chips/chip.ts

@@ -26,7 +26,7 @@ import {
   OnDestroy,
   Optional,
   Output,
-  ViewEncapsulation, HostListener
+  ViewEncapsulation,
 } from '@angular/core';
 import {
   CanColor,
@@ -128,13 +128,11 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte
     /** Whether animations for the chip are enabled. */
   _animationsDisabled: boolean;
 
-  // We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
-  // In Ivy the `host` bindings will be merged when this class is extended, whereas in
-  // ViewEngine they're overwritten.
-  // TODO(mmalerba): we move this back into `host` once Ivy is turned on by default.
-  // tslint:disable-next-line:no-host-decorator-in-concrete
-  @HostListener('transitionend', ['$event'])
-  _handleTransitionEnd(event: TransitionEvent) {
+  /**
+   * Event listener for `transitionend` events. Needs to be an arrow
+   * function so we can pass it easily into `addEventListener`.
+   */
+  private _handleTransitionEnd = (event: TransitionEvent) => {
     this._chipFoundation.handleTransitionEnd(event);
   }
 
@@ -296,7 +294,7 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte
 
  constructor(
     public _changeDetectorRef: ChangeDetectorRef,
-    readonly _elementRef: ElementRef,
+    readonly _elementRef: ElementRef<HTMLElement>,
     private _platform: Platform,
     protected _ngZone: NgZone,
     @Optional() @Inject(MAT_RIPPLE_GLOBAL_OPTIONS)
@@ -307,6 +305,10 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte
     super(_elementRef);
     this._chipFoundation = new MDCChipFoundation(this._chipAdapter);
     this._animationsDisabled = animationMode === 'NoopAnimations';
+
+    _ngZone.runOutsideAngular(() => {
+      _elementRef.nativeElement.addEventListener('transitionend', this._handleTransitionEnd);
+    });
   }
 
   ngAfterContentInit() {
@@ -323,6 +325,7 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte
     this._destroyed.next();
     this._destroyed.complete();
     this._rippleRenderer._removeTriggerEvents();
+    this._elementRef.nativeElement.removeEventListener('transitionend', this._handleTransitionEnd);
     this._chipFoundation.destroy();
   }