Q:

Angular 2 Component - Access DOM (or create Component without template, purely from JS)

Trying to play with Angular 2 here... understood that it's still in alpha. 
How do I access DOM elements from Component?  Specifically, I would like to use other libraries like d3 to generate custom DOM from code.  I suppose I need to create a component and somehow plug into component life-circle to alter DOM with d3... any idea where to start digging? 
I'm using this quickstart repo. 
Thanks! 

A:

If you don't mind using Directive instead of Component it is straightforward.  For Angular 2.0.0-alpha.33 in typescript you can use D3 to manipulate the DOM by Injecting an 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(d.x))
            .attr('cy', d => this.y(d.y));

    }

    onChange() {
        this.render(this.data);
    }
}

A:

Use ElementRef
ElementRef will inject the current DOM node into your component.  The ElementRef service will always be local to your current DOM node. 
Having injected it, you can get hold of the actual DOM node using nativeElement:
var el = elementRef.nativeElement

Once you have this, you can manipulate it it in any way you like, either using DOM scripting, or using a DOM wrapper like jQuery:
$(el)
  .append('<p>Some interesting Stuff')
  .addClass('my_class');

But don't do this if you can help it
Be aware that, as with Angular 1, the use of direct DOM manipulation is discouraged.  You can get pretty much all of your work done using templates, and you should favour this way of working most of the time. 
Direct DOM manipulation leads to convoluted, hard to understand, hard to test code. 
There are times though, when it can seem like the best solution.  For example, if you have to integrate with a third party, high-complexity framework like a graphing library. 
Here's a worked 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;
    }]
  })

A:

Note: [Deprecated]
You can use "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

