Edit: As most comments so far give me the TypeScript solution, I feel I need to repeat here: Using JavaScript ES5.
I want to create a canvas component, where I draw data based on a bound property. How can I do this in Angular2 using JavaScript?
My approach with Angular 1 would be to get the element reference in the directive, but I can't find out how this is supposed to be done now.
Here is an approach which seems to work, but I feel like washing my hands after doing this:
(function (app) {
app.DrawingComponent = ng.core
.Component({
selector: 'my-drawing',
template: '<div><canvas id="{{randomId}}"></canvas></div>'
})
.Class({
constructor: function () {
this.randomId = "canvas" + Math.random();
},
ngAfterViewInit: function() {
var canvas = document.getElementById(this.randomId);
console.log(canvas);
}
});
})(window.app || (window.app = {}));
The only difference between the TS solution I referenced, and ES5 is the way you call ViewChild
While with TS you can use directly the annotation @ViewChild
, in ES5 you have to use the queries
parameter in the Component
app.DrawingComponent = ng.core
.Component({
selector: 'my-drawing',
template: '<div><canvas #myCanvas></canvas></div>',
// Check here! This is important!
queries : {
myCanvas : new ng.core.ViewChild('myCanvas')
}
})
.Class({
constructor: function () {},
ngAfterViewInit: function() {
console.log(this.myCanvas);
}
});
Here's a plnkr demonstrating the usage. There's another answer that can help you to understand a little bit more its usage.
Add a template variable ('#canvas') to the element
template: '<div><canvas #canvas id="{{randomId}}"></canvas></div>'
Use @ViewChild
annotation
@ViewChild('canvas') canvas;
Implement AfterViewInit
and and after ngAfterViewInit()
was called the canvas
field is initialized with an ElementRef
. With canvas.nativeElement
you can access the <canvas>
element.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With