10

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;
    }
}

2 Answers 2

11

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
    }
}
2

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.