refactor(text-field): allow ElementRef to be passed to autofill monitor (#12783)

Similarly to the other observers, allows for an `ElementRef` to be passed to the `AutofillMonitor` which is more convenient since most of the time we deal with `ElementRef`-s anyway.

Author: crisbeto

src/cdk/text-field/autofill.spec.ts

@@ -198,13 +198,13 @@ describe('cdkAutofill', () => {
   }));
 
   it('should monitor host element on init', () => {
-    expect(autofillMonitor.monitor).toHaveBeenCalledWith(testComponent.input.nativeElement);
+    expect(autofillMonitor.monitor).toHaveBeenCalledWith(testComponent.input);
   });
 
   it('should stop monitoring host element on destroy', () => {
     expect(autofillMonitor.stopMonitoring).not.toHaveBeenCalled();
     fixture.destroy();
-    expect(autofillMonitor.stopMonitoring).toHaveBeenCalledWith(testComponent.input.nativeElement);
+    expect(autofillMonitor.stopMonitoring).toHaveBeenCalledWith(testComponent.input);
   });
 });
 

src/cdk/text-field/autofill.ts

@@ -56,11 +56,21 @@ export class AutofillMonitor implements OnDestroy {
    * @param element The element to monitor.
    * @return A stream of autofill state changes.
    */
-  monitor(element: Element): Observable<AutofillEvent> {
+  monitor(element: Element): Observable<AutofillEvent>;
+
+  /**
+   * Monitor for changes in the autofill state of the given input element.
+   * @param element The element to monitor.
+   * @return A stream of autofill state changes.
+   */
+  monitor(element: ElementRef<Element>): Observable<AutofillEvent>;
+
+  monitor(elementOrRef: Element | ElementRef<Element>): Observable<AutofillEvent> {
     if (!this._platform.isBrowser) {
       return EMPTY;
     }
 
+    const element = elementOrRef instanceof ElementRef ? elementOrRef.nativeElement : elementOrRef;
     const info = this._monitoredElements.get(element);
 
     if (info) {
@@ -103,7 +113,16 @@ export class AutofillMonitor implements OnDestroy {
    * Stop monitoring the autofill state of the given input element.
    * @param element The element to stop monitoring.
    */
-  stopMonitoring(element: Element) {
+  stopMonitoring(element: Element);
+
+  /**
+   * Stop monitoring the autofill state of the given input element.
+   * @param element The element to stop monitoring.
+   */
+  stopMonitoring(element: ElementRef<Element>);
+
+  stopMonitoring(elementOrRef: Element | ElementRef<Element>) {
+    const element = elementOrRef instanceof ElementRef ? elementOrRef.nativeElement : elementOrRef;
     const info = this._monitoredElements.get(element);
 
     if (info) {
@@ -133,11 +152,11 @@ export class CdkAutofill implements OnDestroy, OnInit {
 
   ngOnInit() {
     this._autofillMonitor
-      .monitor(this._elementRef.nativeElement)
+      .monitor(this._elementRef)
       .subscribe(event => this.cdkAutofill.emit(event));
   }
 
   ngOnDestroy() {
-    this._autofillMonitor.stopMonitoring(this._elementRef.nativeElement);
+    this._autofillMonitor.stopMonitoring(this._elementRef);
   }
 }

src/lib/input/input.ts

@@ -254,7 +254,7 @@ export class MatInput extends _MatInputMixinBase implements MatFormFieldControl<
   }
 
   ngOnInit() {
-    this._autofillMonitor.monitor(this._elementRef.nativeElement).subscribe(event => {
+    this._autofillMonitor.monitor(this._elementRef).subscribe(event => {
       this.autofilled = event.isAutofilled;
       this.stateChanges.next();
     });
@@ -266,7 +266,7 @@ export class MatInput extends _MatInputMixinBase implements MatFormFieldControl<
 
   ngOnDestroy() {
     this.stateChanges.complete();
-    this._autofillMonitor.stopMonitoring(this._elementRef.nativeElement);
+    this._autofillMonitor.stopMonitoring(this._elementRef);
   }
 
   ngDoCheck() {

src/material-examples/text-field-autofill-monitor/text-field-autofill-monitor-example.ts

@@ -16,14 +16,14 @@ export class TextFieldAutofillMonitorExample implements OnDestroy, OnInit {
   constructor(private autofill: AutofillMonitor) {}
 
   ngOnInit() {
-    this.autofill.monitor(this.firstName.nativeElement)
+    this.autofill.monitor(this.firstName)
         .subscribe(e => this.firstNameAutofilled = e.isAutofilled);
-    this.autofill.monitor(this.lastName.nativeElement)
+    this.autofill.monitor(this.lastName)
         .subscribe(e => this.lastNameAutofilled = e.isAutofilled);
   }
 
   ngOnDestroy() {
-    this.autofill.stopMonitoring(this.firstName.nativeElement);
-    this.autofill.stopMonitoring(this.lastName.nativeElement);
+    this.autofill.stopMonitoring(this.firstName);
+    this.autofill.stopMonitoring(this.lastName);
   }
 }