Accessing element in an Angular2 JavaScript ES5 component

Question

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 1

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.

Answer 2

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.

Answer 3

I'm not sure what the non-Typescript syntax is, but I'm sure you know that youself.

This is how I've done it:

export class Navigation {

    constructor(elementRef: ElementRef) {
        // elementRef.nativeElement is the actual element
    }
}