Difference between Renderer and ElementRef in angular 2
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.
Do notice that you should refrain from using ElementHref as it flagged with a security risk.
Angular 2 Documentation:
"Permitting direct access to the DOM can make your application more vulnerable to XSS attacks. Carefully review any use of ElementRef in your code. For more detail, see the Security Guide."
"Use this API as the last resort when direct access to DOM is needed. Use templating and data-binding provided by Angular instead. Alternatively you take a look at Renderer which provides API that can safely be used even when direct access to native elements is not supported."