feat(ElementRef): provide option to make generic

[jeffbcross]

I'm submitting a ... (check one with "x")

[x] feature request

Current behavior

If I want to get a hold of a Custom Element by assigning an ElementRef via @ViewChild, the nativeElement property is typed as any instead of the Custom Element type.

@Component({
  template: `
    <my-element #my-element></my-element>
  `
})
class MyComponent {
  @ViewChild('my-element') myElement:ElementRef;
  ngAfterViewInit() {
    this.myElement.nativeElement; // type is "any"
  }
}

Expected behavior

@ViewChild('my-element') myElement:ElementRef<MyElement>;

Since TypeScript doesn't support default generic types (see discussion, ElementRef would require a type be provided every time it's used as a type annotation. Since this would be a breaking change, I propose subclassing ElementRef as CustomElementRef, and typing the nativeElement property as the generic type.

@ViewChild('my-element') myElement:CustomElementRef<MyElement>;

What is the motivation / use case for changing the behavior?

So that type information can be available when using custom elements (code completion, refactoring, all the usual goodies).

• Language: [all | TypeScript X.X | ES6/7 | ES5]

TypeScript

CC @robdodson

[jeffbcross]

Even better would be if @ViewChild and @ViewChildren could work with Custom Element types as parameters, and would just return the element instance(s) instead of being wrapped as an ElementRef. This would require some thoughtful design and would be significant work internally.

import { SomeCustomElement } from './some-custom-element';
import { OtherCustomElement } from './other-custom-element';

export class AngularComponent {
  @ViewChild(SomeCustomElement) some: SomeCustomElement;
  @ViewChildren(OtherCustomElement) others: OtherCustomElement[];
  ngAfterViewInit() {
    this.some.customMethod();
    this.others.forEach(o => o.whatever());
}

[jeffbcross]

Note: there are many workarounds to get type information without having a generic ElementRef; they're just a little verbose.

1. Create an alternate ElementRef interface:

interface MyCustomElementRef extends ElementRef {
  nativeElement: MyCustomElement;
}
...
@ViewChild('my-element') myEl:MyCustomElementRef;

2. Cast nativeElement inline when accessing

@ViewChild('my-element') myEl: MyCustomElementRef
ngAfterViewInit() {
  (<MyCustomElement>this.myEl.nativeElement).foo();
}

3. Inline a custom interface

@ViewChild('my-element') myEl: {nativeElement: CustomElement};

[kemsky]

typings.d.ts:

declare interface GenericElementRef<T extends HTMLElement>
{
    nativeElement:T;
}

The only inconvenience is that you have to specify type for DI:

constructor(@Inject(ElementRef) private elementRef:GenericElementRef<HTMLDivElement>)
{
}

If angular template parser could determine exact variable type it would be much more useful.

[lacolaco]

I'm 👎 on T extends HTMLElement because ElementRef is not a thing only of browser.

[FrozenPandaz]

Had a thought and figured I would share.

It's pretty much the same as casting but there could be a method to grab it with a certain class similar to the view child param. This would give a functional way to get type information without needing to change the injection.

class ElementRef {
  nativeElement: any;
  
  getNativeElement(T): T {
    return this.nativeElement;
  }
}

[abdulkareemnalband]

How about

class ElementRef<T=any>{
    nativeElement: T;
}

Now typescript allows default types and it is backward compatible