Difference between Renderer and ElementRef in angular 2

angular angular2-directives elementref angular-renderer2 angular-renderer
Niyaz picture Niyaz · Sep 30, 2016 · Viewed 20.4k times · Source

What is the difference between Renderer and ElementRef? In Angular both are used for DOM Manipulation. I am currently using ElementRef alone for writing Angular 2 directives. If I get more info about Renderer, I can use that in my future directives.

Answer

Günter Zöchbauer picture Günter Zöchbauer · Sep 30, 2016

The Renderer is a class that is a partial abstraction over the DOM. Using the Renderer for manipulating the DOM doesn't break server-side rendering or Web Workers (where direct access to the DOM would break).

ElementRef is a class that can hold a reference to a DOM element. This is again an abstraction to not break in environments where the browsers DOM isn't actually available.

If ElementRef is injected to a component, the injected instance is a reference to the host element of the current component.

There are other ways to acquire an ElementRef instance like @ViewChild(), @ViewChildren(), @ContentChild(), @ContentChildren(). In this case ElementRef is a reference to the matching element(s) in the template or children.

Renderer and ElementRef are not "either this or that", but instead they have to be used together to get full platform abstraction.

Renderer acts on the DOM and ElementRef is a reference to an element in the DOM the Renderer acts on.

Related questions

How to pass object from one component to another in Angular 2?

I have Angular components and first component uses the second one as a directive. They should share the same model object, which is initialized in the first component. How can I pass that model to the second component?

Read More
Angular 2 Scroll to top on Route Change

In my Angular 2 app when I scroll down a page and click the link at the bottom of the page, it does change the route and takes me the next page but it doesn't scroll to the top of the …

Read More
Exception: Can't bind to 'ngFor' since it isn't a known native property

What am I doing wrong? import {bootstrap, Component} from 'angular2/angular2' @Component({ selector: 'conf-talks', template: `<div *ngFor="talk of talks"> {{talk.title}} by {{talk.speaker}} <p>{{talk.description}} </div>` }) class ConfTalks { talks = [ {title: …

Read More