What type should @ViewChild variables have?

Question

If I have a component such as this, which references a native HTML element, what type annotation should be used?

@Component({
    template: `<video #test></video`
})
export class AppComponent {
    @ViewChild('test') test: any;

    constructor() {
        let nativeElement = this.test.nativeElement;
    }
}

score 8 · Answer 1 · answered Jul 23 '18 at 05:04

The ElementRef<> type should be used e.g.

@Component({
    template: `<video #test></video`
})
export class AppComponent {
    @ViewChild('test') test: ElementRef<HTMLVideoElement>;

    constructor() {
        let nativeElement = this.test.nativeElement;
        // nativeElement now has type HTMLVideoElement
    }
}

score 2 · Answer 2 · answered Jul 23 '18 at 05:30

You can use ElementRef<typeoElement>(where typeOfElement is typo of element you are referring) This is show on answer above.

If the element you are accessing is not native element you can use the type of that component

e.g @ViewChild('test') test: ComponentName;

Angular docs contains a good example

What type should @ViewChild variables have?

2 Answers2