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 — Eric Martinez
– Eric Martinez, Commented Jan 6, 2016 at 13:55
Thanks, but this seems to give the TypeScript solution? Tags and title state JavaScript (ES5) — Arve
– Arve, Commented Jan 6, 2016 at 14:23

Community · Accepted Answer · 2017-05-23 10:30:52Z

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.

edited May 23, 2017 at 10:30

CommunityBot

11 silver badge

answered Jan 6, 2016 at 14:56

Eric Martinez

31.9k9 gold badges95 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Günter Zöchbauer · Accepted Answer · 2016-01-06 13:45:13Z

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.

answered Jan 6, 2016 at 13:45

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Comments

Thor Jacobsen · Accepted Answer · 2016-01-06 13:43:16Z

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 6, 2016 at 13:43

Thor Jacobsen

8,8992 gold badges29 silver badges26 bronze badges

1 Comment

Arve Over a year ago

Thanks, but my actual problem is translating this into JavaScript (ES5)

Collectives™ on Stack Overflow

Accessing element in an Angular2 JavaScript ES5 component

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related