htmlangularcanvasdata-binding

How to set an Angular component's canvas size from model data

I have an angular component which contains a canvas, like so:

<canvas #canvas width="800px" height="600px" class="baseCanvas"></canvas>

shows up fine no problem. Thing is, I want to get the width from the component's model.

I tried two things, neither of them worked:

In the ts file I added a member like so (is an @input because later I want to pass it in from a parent component):

@Input() displayCanvasWidth_px:string = "800px";

Then in the component's html file I tried each of these, neither worked:

<canvas #canvas width={{displayCanvasWidth_px}} height="600px" class="baseCanvas"></canvas>

and

<canvas #canvas [width]='displayCanvasWidth_px' height="600px" class="baseCanvas"></canvas>

How can I get this to work? Thanks for any help.

Solution

  • Try without the px, it might work. That is how it's defined in MDN Canvas docs

    HTML:

    <canvas #canvas [width]='displayCanvasWidth' [height]="displayCanvasHeight" class="baseCanvas"></canvas>

    TS:

    @Input() displayCanvasWidth:string = "800";
@Input() displayCanvasHeight:string = "800";