Angular 2 Component - access to the DOM (or creating a component without a template, exclusively from JS)

Question

Trying to play with Angular 2 here ... realized that she was still in alpha.

How do I access DOM elements from Component? In particular, I would like to use other libraries like d3 to create a custom DOM from code. I suppose I need to create a component and somehow connect to the component life cycle in order to change the DOM from d3 ... any idea with which to start digging?

I am using this quick start .

Thank!

Answer 1

If you are not opposed to using the Directive instead of a Component, it is simple. For Angular 2.0.0-alpha.33 in typescript, you can use D3 to control the DOM by injecting ElementRef:

@Directive({ selector: 'scatter-plot', lifecycle: [LifecycleEvent.onChange], properties: [ 'data' ] }) export class ScatterPlot { root: Selection<any>; data: Array<ScatterPlotDataPoint>; x: (number) => number; y: (number) => number; defaultSize: string; circles: any; constructor( @Inject(ElementRef) elementRef: ElementRef, @Attribute('height') height: string, @Attribute('default-size') defaultSize: string ) { var el:HTMLElement = elementRef.nativeElement; this.root = d3.select(el); this.defaultSize = defaultSize ? defaultSize : "5"; this.circles = this.root .append('svg') .attr('class', 'chart') .style({ 'width': '100%', 'height': height ? height + 'px': '', }). selectAll('circle'); } render(newValue) { if (!newValue) return; this.x = d3.scale.linear().domain([-10, 110]).range([0, 250]); this.y = d3.scale.linear().domain([-10, 110]).range([100, 0]); this.circles = this.circles .data(newValue); this.circles.exit().remove(); this.circles.enter() .append('circle'); this.circles .transition() .attr("r", d => d.size ? d.size: this.defaultSize) .style("fill", d => d.color) .attr('cx', d => this.x(dx)) .attr('cy', d => this.y(dy)); } onChange() { this.render(this.data); } } 

Answer 2

Use ElementRef

ElementRef will insert the current DOM node into your component. The ElementRef service will always be local to your current DOM node.

By entering it, you can get the actual DOM node using nativeElement:

 var el = elementRef.nativeElement 

Once you do this, you can manipulate it the way you like, using DOM scripting or using a DOM wrapper such as jQuery:

 $(el) .append('<p>Some interesting Stuff') .addClass('my_class'); 

But don't do it if you can help him

Remember that, as with Angular 1, using direct DOM manipulation is not recommended. You can get almost all of your work using templates, and you should support this way of working most of the time.

Direct manipulation of the DOM leads to complex, difficult to understand, difficult testing.

There are times when this may seem like the best solution. For example, if you need to integrate with a third-party structure with a high degree of complexity, for example, with a graphics library.

Here is an example (in ES6)

 var AppComponent = ng.core .Component({ selector: "app", template: ` <div>Captured element</div> ` }) .Class({ constructor: [ng.core.ElementRef, function(elementRef) { var el = elementRef.nativeElement el; }] }) 

Answer 3

Note. [Outdated]

You can use the "BrowserDomAdapter"
https://angular.io/docs/ts/latest/api/platform/browser/BrowserDomAdapter-class.html

 import {BrowserDomAdapter} from 'angular2/platform/browser' @Component({ selector: 'dom', templateUrl: 'path/to/template.html', providers: [BrowserDomAdapter] }) export class DomComponent { constructor(private _dom: BrowserDomAdapter) { var domIWant = this._dom.query('whatever you want to get'); } } 

Process

• import BrowserDomAdapter
• apply providers: [BrowserDomAdapter]
• initiate in constructor ()
• get dom using instanced BrowserDomAdapter

Answer 4

This document ( http://victorsavkin.com/post/118372404541/the-core-concepts-of-angular-2 ) mentions "decorator style directives", which I believe are described in more detail and with a basic example here ( https: //angular.io/api/core/Directive ).

Answer 5

As other posters mentioned: you can manipulate the DOM by typing ElementRef into the directive. However, think carefully about whether you really need to do this.

D3 is a DOM manipulation tool. It allows you to bind a data object to a DOM node, and then add or remove children from this element in response to changing data values. This is pretty much what Angular 2 does.

Of course, D3 does other things. For example, you can generate angles for a pie chart or regular distribution, and you can use D3 for this.

I know this is not the answer you are looking for. This is not the answer I was looking for, but ... Think about whether to use D3 to manipulate the DOM and bind data. Angular 2 already has DOM manipulation and data binding.