chore(ivy): fix host listener inheritence for mdc-chips and mdc-anchor (#17790)

Author: mmalerba

src/material-experimental/mdc-button/button-base.ts

@@ -7,7 +7,15 @@
  */
 
 import {Platform} from '@angular/cdk/platform';
-import {Directive, ElementRef, Inject, NgZone, Optional, ViewChild} from '@angular/core';
+import {
+  Directive,
+  ElementRef,
+  HostListener,
+  Inject,
+  NgZone,
+  Optional,
+  ViewChild
+} from '@angular/core';
 import {
   CanColor,
   CanColorCtor,
@@ -141,7 +149,6 @@ export const MAT_ANCHOR_HOST = {
   // though they have an index, they're not tabbable.
   '[attr.tabindex]': 'disabled ? -1 : (tabIndex || 0)',
   '[attr.aria-disabled]': 'disabled.toString()',
-  '(click)': '_haltDisabledEvents($event)',
   // MDC automatically applies the primary theme color to the button, but we want to support
   // an unthemed version. If color is undefined, apply a CSS class that makes it easy to
   // select and style this "theme".
@@ -161,6 +168,12 @@ export class MatAnchorBase extends MatButtonBase {
     super(elementRef, platform, ngZone, animationMode);
   }
 
+  // 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('click', ['$event'])
   _haltDisabledEvents(event: Event) {
     // A disabled button shouldn't apply any actions
     if (this.disabled) {

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

@@ -56,7 +56,6 @@ export class MatChipSelectionChange {
     '(keydown)': '_keydown($event)',
     '(focus)': 'focus()',
     '(blur)': '_blur()',
-    '(transitionend)': '_chipFoundation.handleTransitionEnd($event)'
   },
   providers: [{provide: MatChip, useExisting: MatChipOption}],
   encapsulation: ViewEncapsulation.None,

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

@@ -41,7 +41,6 @@ import {GridKeyManagerRow, NAVIGATION_KEYS} from './grid-key-manager';
     '[tabIndex]': 'tabIndex',
     '(mousedown)': '_mousedown($event)',
     '(keydown)': '_keydown($event)',
-    '(transitionend)': '_chipFoundation.handleTransitionEnd($event)',
     '(focusin)': '_focusin()',
     '(focusout)': '_focusout()'
   },

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

@@ -26,7 +26,7 @@ import {
   OnDestroy,
   Optional,
   Output,
-  ViewEncapsulation
+  ViewEncapsulation, HostListener
 } from '@angular/core';
 import {
   CanColor,
@@ -108,7 +108,6 @@ const _MatChipMixinBase:
     '[id]': 'id',
     '[attr.disabled]': 'disabled || null',
     '[attr.aria-disabled]': 'disabled.toString()',
-    '(transitionend)': '_chipFoundation.handleTransitionEnd($event)'
   },
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -129,6 +128,16 @@ 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) {
+    this._chipFoundation.handleTransitionEnd(event);
+  }
+
   get _hasFocus() {
     return this._hasFocusInternal;
   }