title: Accessing element in an Angular2 JavaScript ES5 component
body: <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>