9

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

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.

||||||
6

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.

||||||
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
    }
}
||||||
  • Thanks, but my actual problem is translating this into JavaScript (ES5) – Arve Jan 6 '16 at 14:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.