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

Possible duplicate of [Access a local variable from the template in the controller in Angular2](http://stackoverflow.com/questions/34517969/access-a-local-variable-from-the-template-in-the-controller-in-angular2) — Eric Martinez, Jan 06 '16 at 13:55
Thanks, but this seems to give the TypeScript solution? Tags and title state JavaScript (ES5) — Arve, Jan 06 '16 at 14:23

score 9 · Accepted Answer · edited May 23 '17 at 10:30

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.

score 6 · Answer 2 · answered Jan 06 '16 at 13:45

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.

score 0 · Answer 3 · answered Jan 06 '16 at 13:43

0

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
    }
}

answered Jan 06 '16 at 13:43

Thor Jacobsen

8,621
2
27
26

Thanks, but my actual problem is translating this into JavaScript (ES5) – Arve Jan 06 '16 at 14:24

Accessing element in an Angular2 JavaScript ES5 component

3 Answers3