refactor(core): allow ElementRef in RippleRenderer.setupTriggerEvents (#16953)

The way the `RippleRenderer` is set up at the moment is inconsistent from an API standpoint, because the constructor only accepts an `ElementRef`, whereas `setupTriggerEvents` only accepts an `HTMLElement`, and in most cases they're referring to the same DOM node. These changes make the two code paths consistent with each other by allowing `HTMLElement | ElementRef<HTMLElement>` in both of them.

Author: crisbeto

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

@@ -380,7 +380,7 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte
 
     this._rippleRenderer =
       new RippleRenderer(this, this._ngZone, this._elementRef, this._platform);
-    this._rippleRenderer.setupTriggerEvents(this._elementRef.nativeElement);
+    this._rippleRenderer.setupTriggerEvents(this._elementRef);
   }
 
   /** Forwards interaction events to the MDC chip foundation. */

src/material/chips/chip.ts

@@ -244,7 +244,7 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes
     this._addHostClassName();
 
     this._chipRipple = new RippleRenderer(this, _ngZone, _elementRef, platform);
-    this._chipRipple.setupTriggerEvents(_elementRef.nativeElement);
+    this._chipRipple.setupTriggerEvents(_elementRef);
     this.rippleConfig = globalRippleOptions || {};
     this._animationsDisabled = animationMode === 'NoopAnimations';
   }

src/material/core/ripple/ripple-renderer.ts

@@ -8,6 +8,7 @@
 import {ElementRef, NgZone} from '@angular/core';
 import {Platform, normalizePassiveListenerOptions} from '@angular/cdk/platform';
 import {isFakeMousedownFromScreenReader} from '@angular/cdk/a11y';
+import {coerceElement} from '@angular/cdk/coercion';
 import {RippleRef, RippleState} from './ripple-ref';
 
 export type RippleConfig = {
@@ -97,12 +98,12 @@ export class RippleRenderer {
 
   constructor(private _target: RippleTarget,
               private _ngZone: NgZone,
-              elementRef: ElementRef<HTMLElement>,
+              elementOrElementRef: HTMLElement | ElementRef<HTMLElement>,
               platform: Platform) {
 
     // Only do anything if we're on the browser.
     if (platform.isBrowser) {
-      this._containerElement = elementRef.nativeElement;
+      this._containerElement = coerceElement(elementOrElementRef);
 
       // Specify events which need to be registered on the trigger.
       this._triggerEvents
@@ -226,7 +227,9 @@ export class RippleRenderer {
   }
 
   /** Sets up the trigger event listeners */
-  setupTriggerEvents(element: HTMLElement) {
+  setupTriggerEvents(elementOrElementRef: HTMLElement | ElementRef<HTMLElement>) {
+    const element = coerceElement(elementOrElementRef);
+
     if (!element || element === this._triggerElement) {
       return;
     }

src/material/tabs/tab-nav-bar/tab-nav-bar.ts

@@ -226,7 +226,7 @@ export class MatTabLink extends _MatTabLinkMixinBase implements OnDestroy, CanDi
     super();
 
     this._tabLinkRipple = new RippleRenderer(this, ngZone, elementRef, platform);
-    this._tabLinkRipple.setupTriggerEvents(elementRef.nativeElement);
+    this._tabLinkRipple.setupTriggerEvents(elementRef);
     this.rippleConfig = globalRippleOptions || {};
     this.tabIndex = parseInt(tabIndex) || 0;
 

tools/public_api_guard/material/core.d.ts

@@ -392,12 +392,12 @@ export declare class RippleRef {
 }
 
 export declare class RippleRenderer {
-    constructor(_target: RippleTarget, _ngZone: NgZone, elementRef: ElementRef<HTMLElement>, platform: Platform);
+    constructor(_target: RippleTarget, _ngZone: NgZone, elementOrElementRef: HTMLElement | ElementRef<HTMLElement>, platform: Platform);
     _removeTriggerEvents(): void;
     fadeInRipple(x: number, y: number, config?: RippleConfig): RippleRef;
     fadeOutAll(): void;
     fadeOutRipple(rippleRef: RippleRef): void;
-    setupTriggerEvents(element: HTMLElement): void;
+    setupTriggerEvents(elementOrElementRef: HTMLElement | ElementRef<HTMLElement>): void;
 }
 
 export declare enum RippleState {