Accessing element in an Angular2 JavaScript ES5 component
<p>Edit: As most comments so far give me the TypeScript solution, I feel I need to repeat here: Using JavaScript ES5.</p>

<p>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?</p>

<p>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.</p>

<p>Here is an approach which seems to work, but I feel like washing my hands after doing this:</p>

<pre><code>(function (app) {
    app.DrawingComponent = ng.core
        .Component({
            selector: 'my-drawing',
            template: '&lt;div&gt;&lt;canvas id="{{randomId}}"&gt;&lt;/canvas&gt;&lt;/div&gt;'
        })
        .Class({
            constructor: function () {
                this.randomId = "canvas" + Math.random();
            },
            ngAfterViewInit: function() {
                var canvas = document.getElementById(this.randomId);
                console.log(canvas);
            }
        });
})(window.app || (window.app = {}));
</code></pre>