Thanks to Blindman67 I found a way to make it work :

@HostListener('window:resize')
onResize() {
    this.canvaHeight = Math.floor(window.innerHeight * 0.91);
    this.canvaWidth = Math.floor(window.innerWidth  * 0.75);
    this.canvas.nativeElement.height = this.canvaHeight;
    this.canvas.nativeElement.width = this.canvaWidth;
    this.update();
}

(I still need to store the values for other stuff)

(Math.floor is to correct a warning form the browser)

I have an Angular Canvas that I want to resize based on the window size. I did it that way inside my component :

@HostListener('window:resize', ['$event'])
onResize(event) {
    this.canvaHeight = window.innerHeight * 0.91;
    this.canvaWidth = window.innerWidth  * 0.75;
}

And in my html :

<canvas id="canvas" #canvas width="{{ canvaWidth }}" height="{{ canvaHeight }}" (mousedown)="select($event)" (mousemove)="move($event)" (mouseup)="drop()"></canvas>

When I resize my window the canvas size correctly changes but everything on it disappears. When I do an action which calls my update function it reappears. But if I call it within the onResize function it doesn’t reappears and I don’t know why.

@HostListener('window:resize', ['$event'])
onResize(event) {
    this.canvaHeight = window.innerHeight * 0.91;
    this.canvaWidth = window.innerWidth  * 0.75;
    this.update();
}

Any idea ? Do I have to somehow refresh the DOM ? How to do it then ?

Edit : If I move an object, it is indeed moved even when it hasn’t reappeared yet.

I also tried with a Promise and some ways to refresh DOM like ApplicationRef.tick() and ChangeDetectorRef.detectChanges() but it doesn’t work