Arve Arve - 23 days ago 6
Javascript Question

Accessing element in an Angular2 JavaScript ES5 component

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 = {}));

Answer

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.