property 'jquery' does not exist on type 'window & typeof globalthis'

Question

trying to use jQuery on this part of my angular ts code:

@ViewChild("focusMe", { static: false }) MyInput: ElementRef;
ngAfterViewInit() {
    window.jQuery(this.MyInput.nativeElement).find('input').focus();
}

however the intellisense is as follows

property 'jquery' does not exist on type 'window & typeof globalthis'

how can i load JQuery onto the window?

Answer 1

Angular is all about not manipulating the DOM directly, that being said if you really need jQuery then add it in your project with npm i jquery instead of adding it to a script tag, then use it like this:

import $ from 'jquery';

@ViewChild("focusMe", { static: false }) MyInput: ElementRef;
ngAfterViewInit() {
    $(this.MyInput.nativeElement).find('input').focus();
}

You choose the name when you import it, so if you really need jQuery, then use import jQuery from 'jquery';