Using D3.js with Angular 2

Question

I have successfully integrated Angular 2 (Alpha 44) with D3.js:

Answer 1

To use Renderer, you need the raw HTML element (aka nativeElement). So basically you have to use whatever your library is, get the raw element and pass it to Renderer.

For example

// h3[0][0] contains the raw element
var h3 = d3.select(this.el.nativeElement).select('h3');
this.renderer.setElementStyle(h3[0][0], 'background-color', 'blue');

The warning about ElementRef is about using it directly. That means that this is discouraged

elementRef.nativeElement.style.backgroundColor = 'blue';

But this is fine

renderer.setElementStyle(elementRef.nativeElement, 'background-color', 'blue');

For showing purposes you can use it as well with jQuery

// h2[0] contains the raw element
var h2 = jQuery(this.el.nativeElement).find('h2');
this.renderer.setElementStyle(h2[0], 'background-color', 'blue');

My recommendation though is to stick to use what angular2 provides you to do this easily without depending on another libraries.

With pure angular2 you have two easy ways

• Using directives

// This directive would style all the H3 elements inside MyComp
@Directive({
    selector : 'h3',
    host : {
        '[style.background-color]' : "'blue'"
    }
})
class H3 {}

@Component({
    selector : 'my-comp',
    template : '
some text
',
    directives : [H3]
})
class MyComp {}

• Using ViewChild with local variables

@Component({
    selector : 'my-comp',
    template : '
some text
',
})
class MyComp {
    @ViewChild('myH3') myH3;
    ngAfterViewInit() {
        this.renderer.setElementStyle(this.myH3.nativeElement, 'background-color', 'blue');
    }
}

Here's a plnkr with all the cases I mentioned in this answer. Your requirements may differ, of course, but try to use angular2 whenever you can.