Activate on hover from typescript

I am working on a project where user can either click on a map for a specifice region or click a radio button for a corresponding region. From a user experience perspective the demand has been made that the map also has the 'on hover' effect when selecting a region by radio button.

However, I can only think of using JQuery. Is there an alternative i am not seeing here?

I am working in a Angular 14 environment with typescript 4.7.2.

Any help or suggestions would be much appreciated.

Typescript code:

onChange(){
this.activateOnHover(this.currentRegion.ID);
}
activateOnHover(selector: string): void {
$("#"+selector).mouseover();
}


HTML:

(click)="onClick($event)"


Unfortunately I am limited in the amount of code I can post because of project restrictions.

Update

Id of the element i want to highlight:

id="Noord-Nederland" (click)="onClick($event)"


When implementing Wahab's suggestion:

@ViewChild('#Noord-Nederland') input: ElementRef<HTMLInputElement>;

onChange(){
this.activateHoverEffect(this.currentRegion.ID);
}
activateHoverEffect(selector: string): void {
console.log(" 1")
console.log(this.input);
// Access the input object or DOM node
console.log("2 ")
console.dir(this.input.nativeElement);
console.log("3")

// Manipulate via Renderer2
this.renderer.setStyle(this.input.nativeElement, 'background', '#d515a0');
}


After the 1, it logs undefined.

There are element that have the same ID, because the fact I am using SVG, however I cannot directly imagine his beeing the cause of the not being able to find the element.

Continue reading...