Struggling to grasp the basics of Angular 2 has been quite a challenge for me. After learning that script tags can only be used in index.html, I decided to try and convert one of my js files to ts within the component class of app.component.ts. Any help or guidance you could provide would be greatly appreciated.
Could someone assist me in understanding and resolving the errors in my TS translation?
Below is the original JavaScript code:
var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');
function handleImage(e) {
var reader = new FileReader();
reader.onload = function (event) {
var img = new Image();
img.onload = function () {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
And here is the current TypeScript version with reported errors:
https://i.sstatic.net/DXW8d.png
app.component.html:
<div ng-controller="AppController">
<label>Image File:</label><br/>
<input type="file" id="imageLoader" name="imageLoader" />
<canvas id="imageCanvas"></canvas>
</div>