Horizontal scrolling with mouse wheel and button in a div

Thank you for who paying attention and read my question.

I am a new to Angular and Typescript language.
Currently I am able to scroll the division using button control, and I wish to scroll the division using mouse wheel too.

I have try some code, as example:

<div ... (wheel)="onWheel($event)" ... ><div>

onWheel(event: WheelEvent): void {
   (<Element>event.target).parentElement.scrollLeft += event.deltaY;
   event.preventDefault();
} 

But it seem not working on my project.

And Here is my HTML code:

<button mat-button class="prevBut" (click)="scrollLeft()"><mat-icon>keyboard_arrow_left</mat-icon </button>

<div #widgetsContent class="widgetDiv" (wheel)="onWheel($event)">
</div>

<button mat-button class="prevBut" (click)="scrollRight()"><mat-icon>keyboard_arrow_right</mat-icon></button>

Here is my Typescript code:

 public scrollRight(): void {
        this.widgetsContent.nativeElement.scrollTo({ left: (this.widgetsContent.nativeElement.scrollLeft += 150), behavior: 'smooth' });  
 }

 public scrollLeft(): void {
        this.widgetsContent.nativeElement.scrollTo({ left: (this.widgetsContent.nativeElement.scrollLeft -= 150), behavior: 'smooth' });
 }

 onWheel(event: WheelEvent): void {
       (event.target as Element).parentElement.scrollLeft += event.deltaY;
       event.preventDefault();
 }

I would very much appreciate any suggestion, of how would the best way be to proceed further.

Source: New feed
Source Url Horizontal scrolling with mouse wheel and button in a div