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

Issue

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?

Solution

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

Answered By - Guerric P