Dynamically generate multiple canvas area based on json provided

Question

I am using angular2 and html5 canvas. Based on json provided I want to create multiple divs with canvas area inside them.

This is how generate my divs with canvas area (HTML CODE)

<div class="masterpage" *ngFor="let x of masterPages" draggable [dragScope]="'masterpage'" [dragData]="x">
    <canvas #myCanvas width="105" height="149" style="background:lightgray;"></canvas>
</div>

.ts code

ngAfterViewInit() {
    let canvas = this.myCanvas.nativeElement;
    this.context = canvas.getContext("2d");
    this.tick(this.masterPages);
}

tick(masterPages) {
    var ctx = this.context;
    ctx.clearRect(0, 0, 150, 150);
    for (let j = 0; j < this.masterPages[this.count].areas.length; j++) {
        ctx.fillStyle = this.masterPages[this.count].areas[j].type;
        ctx.fillRect(masterPages[this.count].areas[j].x / 2, masterPages[this.count].areas[j].y / 2, masterPages[this.count].areas[j].width / 2, masterPages[this.count].areas[j].height / 2);
    }
    this.count = this.count + 1;
}

below is my json

masterPages = [{
        areas: [
            {
                type: "FlowArea",
                width: "183.0",
                x: "12.0",
                y: "40.0",
                id: "FAR.1",
                height: "237.0"
            },
            {
                type: "StaticArea",
                width: "210.0",
                x: "0.0",
                y: "7.0",
                id: "SAR.2",
                height: "25.0"
            },
            {
                type: "StaticArea",
                width: "210.0",
                x: "0.0",
                y: "282.0",
                id: "SAR.1",
                height: "15.0"
            },
            {
                type: "StaticArea",
                width: "2.0",
                x: "6.0",
                y: "26.0",
                id: "SAR.3",
                height: "256.0"
            }
        ]
    },
    {
        areas: [
            {
                type: "FlowArea",
                width: "183.0",
                x: "12.0",
                y: "13.25",
                id: "FAR.1",
                height: "265.0"
            },
            {
                type: "StaticArea",
                width: "210.0",
                x: "0.0",
                y: "282.0",
                id: "SAR.1",
                height: "15.0"
            }
        ]
    }
    ];

according to json both canvas should have some shapes but in my case second canvas is coming empty

Answer 1

Try using @ViewChildren instead of @ViewChild and iterate over each canvas using

let canvas = this.myCanvas.toArray()[i].nativeElement;

So who will get access to each of the canvas area created dynamically.

Answer 2

The main problem is that the identifier (#myCanvas) can handle only one reference to an element.

And unfortunately, as far as I'm aware, there's no way to generate multiple unique identifiers dinamically.

In order to update several different canvas elements, you will need to get their references by some other means. One of them is to manipulate the DOM directly, but it's not recommended, like:

let canvas = document.getElementById('canvas' + i);

Another example would be to use a querySelector (via ElementRef):

this.elementRef.nativeElement.querySelector('.myCanvasClass');

Take a look and the ViewChildren documentation. It might shed some light to what you're trying to do: https://angular.io/docs/ts/latest/api/core/index/ViewChildren-decorator.html