I have an Angular component with a canvas, like so:

<div>
    <canvas #canvas [width]='displayCanvasWidth' [height]='displayCanvasHeight'>
    </canvas>
</div>

When I set the value of displayCanvasWidth in the component’s .ts file the canvas changes size as expected.

How can I hook in to the resize event of the canvas?

In the .ts file I’ve set a variable for the canvas and that is working fine:

@ViewChild('canvas', { static: true })
private displayCanvas:ElementRef<HTMLCanvasElement> | null = null;

Neither of the following is working for me:

this.displayCanvas.nativeElement.addEventListener('resize', this.OnDisplayCanvasSizeChanged, false);

or

this.displayCanvas.nativeElement.onresize = this.OnDisplayCanvasSizeChanged;

where the function is define like so:

public OnDisplayCanvasSizeChanged(e:any) {
    alert("Here!");
  }