refactor(observers): allow ElementRef to be passed to content observer (#12762)

Allows for the `ContentObserver` to accept an `ElementRef`, in addition to an `Element`. This is more convenient since we deal with element refs most of the time anyway.

Author: crisbeto

src/cdk/a11y/live-announcer/live-announcer.ts

@@ -117,13 +117,11 @@ export class CdkAriaLive implements OnDestroy {
         this._subscription.unsubscribe();
         this._subscription = null;
       }
-    } else {
-      if (!this._subscription) {
-        this._subscription = this._ngZone.runOutsideAngular(
-            () => this._contentObserver.observe(this._elementRef.nativeElement).subscribe(
-                () => this._liveAnnouncer.announce(
-                    this._elementRef.nativeElement.innerText, this._politeness)));
-      }
+    } else if (!this._subscription) {
+      this._subscription = this._ngZone.runOutsideAngular(
+          () => this._contentObserver.observe(this._elementRef).subscribe(
+              () => this._liveAnnouncer.announce(
+                  this._elementRef.nativeElement.innerText, this._politeness)));
     }
   }
   private _politeness: AriaLivePoliteness = 'off';

src/cdk/observers/observe-content.spec.ts

@@ -2,9 +2,6 @@ import {Component, ElementRef, ViewChild} from '@angular/core';
 import {async, ComponentFixture, fakeAsync, inject, TestBed, tick} from '@angular/core/testing';
 import {ContentObserver, MutationObserverFactory, ObserversModule} from './observe-content';
 
-// TODO(elad): `ProxyZone` doesn't seem to capture the events raised by
-// `MutationObserver` and needs to be investigated
-
 describe('Observe content directive', () => {
   describe('basic usage', () => {
     beforeEach(async(() => {
@@ -159,7 +156,7 @@ describe('ContentObserver injectable', () => {
       const fixture = TestBed.createComponent(UnobservedComponentWithTextContent);
       fixture.detectChanges();
 
-      contentObserver.observe(fixture.componentInstance.contentEl.nativeElement)
+      contentObserver.observe(fixture.componentInstance.contentEl)
           .subscribe(() => spy());
 
       expect(spy).not.toHaveBeenCalled();
@@ -177,9 +174,9 @@ describe('ContentObserver injectable', () => {
           const fixture = TestBed.createComponent(UnobservedComponentWithTextContent);
           fixture.detectChanges();
 
-          const sub1 = contentObserver.observe(fixture.componentInstance.contentEl.nativeElement)
+          const sub1 = contentObserver.observe(fixture.componentInstance.contentEl)
               .subscribe(() => spy());
-          contentObserver.observe(fixture.componentInstance.contentEl.nativeElement)
+          contentObserver.observe(fixture.componentInstance.contentEl)
               .subscribe(() => spy());
 
           expect(mof.create).toHaveBeenCalledTimes(1);

src/cdk/observers/observe-content.ts

@@ -54,7 +54,17 @@ export class ContentObserver implements OnDestroy {
    * Observe content changes on an element.
    * @param element The element to observe for content changes.
    */
-  observe(element: Element): Observable<MutationRecord[]> {
+  observe(element: Element): Observable<MutationRecord[]>;
+
+  /**
+   * Observe content changes on an element.
+   * @param element The element to observe for content changes.
+   */
+  observe(element: ElementRef<Element>): Observable<MutationRecord[]>;
+
+  observe(elementOrRef: Element | ElementRef<Element>): Observable<MutationRecord[]> {
+    const element = elementOrRef instanceof ElementRef ? elementOrRef.nativeElement : elementOrRef;
+
     return Observable.create(observer => {
       const stream = this._observeElement(element);
       const subscription = stream.subscribe(observer);
@@ -169,7 +179,7 @@ export class CdkObserveContent implements AfterContentInit, OnDestroy {
 
   private _subscribe() {
     this._unsubscribe();
-    const stream = this._contentObserver.observe(this._elementRef.nativeElement);
+    const stream = this._contentObserver.observe(this._elementRef);
 
     // TODO(mmalerba): We shouldn't be emitting on this @Output() outside the zone.
     // Consider brining it back inside the zone next time we're making breaking changes.