refactor: use strongly-typed ElementRef (#10825)

Currently the `nativeElement` in all of the `ElementRef` usages is typed to be `any`. These changes add proper typing to help us catch some errors at compile time.

Author: crisbeto

guides/creating-a-custom-form-field-control.md

@@ -159,31 +159,31 @@ private _placeholder: string;
 
 #### `ngControl`
 
-This property allows the form field control to specify the `@angular/forms` control that is bound to this component. Since we haven't set up our component to act as a `ControlValueAccessor`, we'll just set this to `null` in our component. 
+This property allows the form field control to specify the `@angular/forms` control that is bound to this component. Since we haven't set up our component to act as a `ControlValueAccessor`, we'll just set this to `null` in our component.
 
 ```ts
 ngControl: NgControl = null;
 ```
 
-It is likely you will want to implement `ControlValueAccessor` so that your component can work with `formControl` and `ngModel`. If you do implement `ControlValueAccessor` you will need to get a reference to the `NgControl` associated with your control and make it publicly available. 
+It is likely you will want to implement `ControlValueAccessor` so that your component can work with `formControl` and `ngModel`. If you do implement `ControlValueAccessor` you will need to get a reference to the `NgControl` associated with your control and make it publicly available.
 
 The easy way is to add it as a public property to your constructor and let dependency injection handle it:
 
 ```ts
 constructor(
-  ..., 
+  ...,
   @Optional() @Self() public ngControl: NgControl,
   ...,
 ) { }
 ```
 
-Note that if your component implements `ControlValueAccessor`, it may already be set up to provide `NG_VALUE_ACCESSOR` (in the `providers` part of the component's decorator, or possibly in a module declaration). If so you may get a *cannot instantiate cyclic dependency* error. 
+Note that if your component implements `ControlValueAccessor`, it may already be set up to provide `NG_VALUE_ACCESSOR` (in the `providers` part of the component's decorator, or possibly in a module declaration). If so you may get a *cannot instantiate cyclic dependency* error.
 
 To resolve this, remove the `NG_VALUE_ACCESSOR` provider and instead set the value accessor directly:
 
 ```ts
 constructor(
-  ..., 
+  ...,
   @Optional() @Self() public ngControl: NgControl,
   ...,
 ) {
@@ -207,7 +207,7 @@ need to remember to emit on the `stateChanges` stream so change detection can ha
 ```ts
 focused = false;
 
-constructor(fb: FormBuilder, private fm: FocusMonitor, private elRef: ElementRef) {
+constructor(fb: FormBuilder, private fm: FocusMonitor, private elRef: ElementRef<HTMLElement>) {
   ...
   fm.monitor(elRef.nativeElement, true).subscribe(origin => {
     this.focused = !!origin;

src/cdk-experimental/dialog/dialog-container.ts

@@ -104,7 +104,7 @@ export class CdkDialogContainer extends BasePortalOutlet implements OnDestroy {
   _afterExit: Subject<void> = new Subject();
 
   constructor(
-    private _elementRef: ElementRef,
+    private _elementRef: ElementRef<HTMLElement>,
     private _focusTrapFactory: FocusTrapFactory,
     private _changeDetectorRef: ChangeDetectorRef,
     @Optional() @Inject(DOCUMENT) private _document: any,

src/cdk/a11y/aria-describer/aria-describer.spec.ts

@@ -181,16 +181,16 @@ function expectMessage(el: Element, message: string) {
   `,
 })
 class TestApp {
-  @ViewChild('element1') _element1: ElementRef;
+  @ViewChild('element1') _element1: ElementRef<HTMLElement>;
   get element1(): Element { return this._element1.nativeElement; }
 
-  @ViewChild('element2') _element2: ElementRef;
+  @ViewChild('element2') _element2: ElementRef<HTMLElement>;
   get element2(): Element { return this._element2.nativeElement; }
 
-  @ViewChild('element3') _element3: ElementRef;
+  @ViewChild('element3') _element3: ElementRef<HTMLElement>;
   get element3(): Element { return this._element3.nativeElement; }
 
-  @ViewChild('element4') _element4: ElementRef;
+  @ViewChild('element4') _element4: ElementRef<HTMLElement>;
   get element4(): Element { return this._element4.nativeElement; }
 
 

src/cdk/a11y/focus-monitor/focus-monitor.ts

@@ -389,7 +389,7 @@ export class CdkMonitorFocus implements OnDestroy {
   private _monitorSubscription: Subscription;
   @Output() cdkFocusChange = new EventEmitter<FocusOrigin>();
 
-  constructor(private _elementRef: ElementRef, private _focusMonitor: FocusMonitor) {
+  constructor(private _elementRef: ElementRef<HTMLElement>, private _focusMonitor: FocusMonitor) {
     this._monitorSubscription = this._focusMonitor.monitor(
         this._elementRef.nativeElement,
         this._elementRef.nativeElement.hasAttribute('cdkMonitorSubtreeFocus'))

src/cdk/a11y/focus-trap/focus-trap.ts

@@ -350,7 +350,7 @@ export class CdkTrapFocus implements OnDestroy, AfterContentInit, DoCheck {
   private _autoCapture: boolean;
 
   constructor(
-      private _elementRef: ElementRef,
+      private _elementRef: ElementRef<HTMLElement>,
       private _focusTrapFactory: FocusTrapFactory,
       @Inject(DOCUMENT) _document: any) {
 

src/cdk/observers/observe-content.ts

@@ -164,7 +164,8 @@ export class CdkObserveContent implements AfterContentInit, OnDestroy {
 
   private _currentSubscription: Subscription | null = null;
 
-  constructor(private _contentObserver: ContentObserver, private _elementRef: ElementRef,
+  constructor(private _contentObserver: ContentObserver,
+              private _elementRef: ElementRef<HTMLElement>,
               private _ngZone: NgZone) {}
 
   ngAfterContentInit() {

src/cdk/overlay/position/connected-position-strategy.spec.ts

@@ -63,7 +63,7 @@ describe('ConnectedPositionStrategy', () => {
 
     let originElement: HTMLElement;
     let positionStrategy: ConnectedPositionStrategy;
-    let fakeElementRef: ElementRef;
+    let fakeElementRef: ElementRef<HTMLElement>;
 
     let originRect: ClientRect | null;
     let originCenterX: number | null;
@@ -73,7 +73,7 @@ describe('ConnectedPositionStrategy', () => {
       // The origin and overlay elements need to be in the document body in order to have geometry.
       originElement = createPositionedBlockElement();
       document.body.appendChild(originElement);
-      fakeElementRef = new ElementRef(originElement);
+      fakeElementRef = new ElementRef<HTMLElement>(originElement);
     });
 
     afterEach(() => {
@@ -583,7 +583,7 @@ describe('ConnectedPositionStrategy', () => {
     let positionChangeHandler: jasmine.Spy;
     let onPositionChangeSubscription: Subscription;
     let positionChange: ConnectedOverlayPositionChange;
-    let fakeElementRef: ElementRef;
+    let fakeElementRef: ElementRef<HTMLElement>;
     let positionStrategy: ConnectedPositionStrategy;
 
     beforeEach(() => {
@@ -597,14 +597,14 @@ describe('ConnectedPositionStrategy', () => {
       scrollable.appendChild(originElement);
 
       // Create a strategy with knowledge of the scrollable container
-      fakeElementRef = new ElementRef(originElement);
+      fakeElementRef = new ElementRef<HTMLElement>(originElement);
       positionStrategy = overlay.position().connectedTo(
           fakeElementRef,
           {originX: 'start', originY: 'bottom'},
           {overlayX: 'start', overlayY: 'top'});
 
       positionStrategy.withScrollableContainers([
-          new CdkScrollable(new ElementRef(scrollable), null!, null!)]);
+          new CdkScrollable(new ElementRef<HTMLElement>(scrollable), null!, null!)]);
       positionChangeHandler = jasmine.createSpy('positionChangeHandler');
       onPositionChangeSubscription =
           positionStrategy.onPositionChange.subscribe(positionChangeHandler);
@@ -673,13 +673,13 @@ describe('ConnectedPositionStrategy', () => {
   describe('positioning properties', () => {
     let originElement: HTMLElement;
     let positionStrategy: ConnectedPositionStrategy;
-    let fakeElementRef: ElementRef;
+    let fakeElementRef: ElementRef<HTMLElement>;
 
     beforeEach(() => {
       // The origin and overlay elements need to be in the document body in order to have geometry.
       originElement = createPositionedBlockElement();
       document.body.appendChild(originElement);
-      fakeElementRef = new ElementRef(originElement);
+      fakeElementRef = new ElementRef<HTMLElement>(originElement);
     });
 
     afterEach(() => {

src/cdk/overlay/position/connected-position-strategy.ts

@@ -58,7 +58,7 @@ export class ConnectedPositionStrategy implements PositionStrategy {
   constructor(
       originPos: OriginConnectionPosition,
       overlayPos: OverlayConnectionPosition,
-      connectedTo: ElementRef,
+      connectedTo: ElementRef<HTMLElement>,
       viewportRuler: ViewportRuler,
       document: Document,
       // @breaking-change 7.0.0 `platform` parameter to be made required.

src/cdk/overlay/position/flexible-connected-position-strategy.spec.ts

@@ -1575,7 +1575,7 @@ describe('FlexibleConnectedPositionStrategy', () => {
         }]);
 
       strategy.withScrollableContainers([
-        new CdkScrollable(new ElementRef(scrollable), null!, null!)
+        new CdkScrollable(new ElementRef<HTMLElement>(scrollable), null!, null!)
       ]);
 
       positionChangeHandler = jasmine.createSpy('positionChange handler');

src/cdk/scrolling/scroll-dispatcher.spec.ts

@@ -117,7 +117,7 @@ describe('ScrollDispatcher', () => {
   describe('Nested scrollables', () => {
     let scroll: ScrollDispatcher;
     let fixture: ComponentFixture<NestedScrollingComponent>;
-    let element: ElementRef;
+    let element: ElementRef<HTMLElement>;
 
     beforeEach(inject([ScrollDispatcher], (s: ScrollDispatcher) => {
       scroll = s;
@@ -228,7 +228,7 @@ describe('ScrollDispatcher', () => {
 })
 class ScrollingComponent {
   @ViewChild(CdkScrollable) scrollable: CdkScrollable;
-  @ViewChild('scrollingElement') scrollingElement: ElementRef;
+  @ViewChild('scrollingElement') scrollingElement: ElementRef<HTMLElement>;
 }
 
 
@@ -245,7 +245,7 @@ class ScrollingComponent {
   `
 })
 class NestedScrollingComponent {
-  @ViewChild('interestingElement') interestingElement: ElementRef;
+  @ViewChild('interestingElement') interestingElement: ElementRef<HTMLElement>;
 }
 
 const TEST_COMPONENTS = [ScrollingComponent, NestedScrollingComponent];