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.

Community · Accepted Answer · 2017-05-23 10:31:22Z

5

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

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered Aug 8, 2016 at 5:48

Thierry Templier

203k44 gold badges407 silver badges366 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

difference between using angular 2 renderer and using nativeElement

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related