Event is not assignable to parameter of type ResizedEvent

[vpeacock]

<mat-sidenav-content [ngStyle]="{'margin-left.px': contentMargin}">
        <div class="content mat-elevation-z8"  (resized)="onResized($event)">
            <!-- Main content here! -->
            <router-outlet></router-outlet>
        </div>
        <app-scroll-top></app-scroll-top>
    </mat-sidenav-content>

When using this directive in my code, I get the following error:

(parameter) $event: Event Argument of type 'Event' is not assignable to parameter of type 'ResizedEvent'. Type 'Event' is missing the following properties from type 'ResizedEvent': newRect, isFirstngtsc(2345) sidenav.component.ts(15, 24): Error occurs in the template of component SideNavComponent.

This is my method:

public onResized(event: ResizedEvent): void { this.width = Math.round(event.newRect.width); this.height = Math.round(event.newRect.height); console.log(width${this.width}, height${this.height}); }

[hakimio]

You forgot to import AngularResizeEventModule.

[MkeniniZaatout]

I have the same problem and i have import AngularResizeEventModule

[andreimatei]

Is it possible that you have a standalone component and you have imported AngularResizeEventModule in the .ts file, but not in the component's imports: [...] field? I.e.

@Component({
  selector: 'app-my-component',
  standalone: true,
  imports: [AngularResizeEventModule],