Bind a DOM element in template

Question

I have the following Component:

import {Component, OnInit} from 'angular2/core';
@Component({
    selector: 'test',
    template: `{{renderer.domElement}}`
})
export class TestComponent implements OnInit {
    renderer;    
    ngOnInit() {
        this.renderer = new THREE.WebGLRenderer();
        this.renderer.setSize(300, 300);
        //document.body.appendChild(this.renderer.domElement);
    }
}

The {{}} property binding doesn't bind the DOM element to template. Using appendChild doesn't make the DOM up-to-date with the "renderer" variable. The only way I can think of is to read the text content of the DOM element and bind it, but I guess it's not the best approach. How should I do it?

Gene · Accepted Answer · 2016-04-03 23:33:32Z

In Angular 1.XXX having a dynamic template is often not required and often makes for unreadable code. In your situation above replace the template with something like:

template: "<canvas class='threeEl'></canvas>"

Then add a constructor to your class to get the elementRef and use the canvas property when instantiating the WebGLRenderer():

export class TestComponent implements OnInit {
    el; 
    renderer;    
    constructor: [ng.core.ElementRef, function(elementRef) {
      el = elementRef.nativeElement;
    }]

    ngOnInit() {
        this.renderer = new THREE.WebGLRenderer({canvas: this.el});
        this.renderer.setSize(300, 300);
        //document.body.appendChild(this.renderer.domElement);
    }
}

lys1030 · Accepted Answer · 2016-04-05 03:11:20Z

0

Finally got it work. Thanks for the help!

import {Component, ElementRef} from 'angular2/core';

@Component({
    selector: 'test',
    template: ''
})
export class TestComponent {

    el;

    constructor(public elementRef: ElementRef) {
        this.el = elementRef.nativeElement;
        this.renderer = new THREE.WebGLRenderer();
        this.el.appendChild(this.renderer.domElement);     
    }
}

answered Apr 5, 2016 at 3:11

lys1030

2831 gold badge5 silver badges17 bronze badges

Comments

Günter Zöchbauer · Accepted Answer · 2016-04-05 04:16:56Z

0

{{}} curly braces are used for interpolation, your template effectively converted to renderer.domElement.toString().

You should change selector to '[test]' and use injected ElementRef to access ElementRef.nativeElement:

<canvas test></canvas>

Constructor:

this.renderer = new THREE.WebGLRenderer({canvas: elementRef.nativeElement});

edited Apr 5, 2016 at 4:16

Günter Zöchbauer

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

answered Apr 4, 2016 at 0:00

kemsky

15.4k3 gold badges37 silver badges53 bronze badges

Collectives™ on Stack Overflow

Bind a DOM element in template

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related