difference between using angular 2 renderer and using nativeElement

Question

I wanted to know what is difference between this code:

export class SomeDirective implements OnInit {

    constructor(private _elRef: ElementRef){}

    ngOnInit(): any {
        this._elRef.nativeElement.style.backgroundColor = 'green';
    }
}

and this one:

export class SomeDirective implements OnInit {

    constructor(private _elRef: ElementRef, private _renderer: Renderer){}

    ngOnInit(): any {
        this._renderer.setElementStyle(this._elRef, 'background-color', 'green');
    }
}

I know that the second one has some advantages over the first one, I just need to know what those advantages specifically are.

Answer 1

My understanding is that Renderer is an abstraction in Angular2. This means that a dedicated implementation is plugged behind according to the execution context. For example, in the browser, with web workers, from server side...

As a matter of fact, there are contexts when the DOM API isn't available. I think about web worker and server execution.

See this question:

• Angular2: ElementRef nativeElement vs querySelector performance