I need to create a specific number of squares within a container using Angular2. Can you please provide me with a straightforward example, preferably utilizing canvas?
Currently, I have converted webpack starter for use with Angular:
This is the code inside square.component.template.html:
<h1>My component</h1>
<p>first paragraph</p>
<div class="container">
<form (ngSubmit)="draw(counter.value)" autocomplete="off">
<input [value]="counter.value" (input)="counter.value = $event.target.value" placeholder="Number of squares" autofocus>
<button md-raised-button color="primary">Submit Value</button>
</form>
<canvas width="350" height="800"></canvas>
The content of square.component.ts is as follows:
import { Component } from '@angular/core';
@Component({
selector: 'square',
templateUrl: './square.component.template.html'
})
export class DetailComponent {
// Set our default values
counter = { value: '' };
constructor() {
}
ngOnInit() {
console.log('hello `Detail` component');
}
draw(value: number) {
console.log('counter', value);
for (var i = 0; i < value; i++) {
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
context.fillStyle = color;
context.fillRect(10, 10, 100, 50);
}
this.counter.value = 0;
}
The current issue is that it only draws a square in one location. Additionally, if a value greater than 50 is entered, the browser crashes. Since I am new to Angular2, I require some assistance. Can you offer any guidance?