Manipulating the DOM is easy with Angular. We can directly access the element by using ElementRef
provided by @angular/core
.
If you manipulate it by using a directive (common use case) — most are likely to use nativeElement
directly like this:
import { Directive, ElementRef, OnInit } from '@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective implements OnInit {
constructor(
private el: ElementRef
) { }
ngOnInit() {
this.el.nativeElement.style.color = 'blue';
}
}
It will correctly change the color of the element. A lot of tutorials demonstrate the use of nativeElement
, but is this safe? No, not really.
According to Angular docs ElementRef
:
Use this API as the last resort when direct access to DOM is needed. Permitting direct access to the DOM can make your application more vulnerable to XSS attacks. Carefully review any use of
[_ElementRef_](https://angular.io/api/core/ElementRef)
in your code. Use templating and data-binding provided by Angular instead. Alternatively you take a look at[_Renderer_](https://angular.io/api/core/Renderer)
which provides API that can safely be used even when direct access to native elements is not supported.Relying on direct DOM access creates tight coupling between your application and rendering layers which will make it impossible to separate the two and deploy your application into a web worker.
Not good. But, there’s an alternative called Renderer
.
There are a lot of ways to manipulate the DOM. In this use case, we need to change a CSS property, the color. According to the API, we need to use setStyle
like this:
import { Directive, ElementRef, OnInit, Renderer2 } from '@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective implements OnInit {
constructor(
private el: ElementRef,
private renderer: Renderer2
) { }
ngOnInit() {
// this.el.nativeElement.style.color = 'blue';
this.renderer.setStyle(this.el.nativeElement, 'color', 'blue');
}
}
Worked as expected! Renderer
is pretty useful for common use cases, and also for complex DOM manipulation.
To target a specific element, you may need to use ViewChild
or ContentChild
.
In conclusion, stop using ElementRef
and use Renderer
!
Hope this tutorial will surely help you !
#angular #javascript