How to set HTML content in the ElementRef (nativeEelement)?
DOM Manipulations via directly changing properties on the nativeElement
is not considered as a good practice. It's also not going to work in some cases like Web Workers and Server Side Rendering using Angular Universal.
A safer way of doing this is using Renderer2
.
import { ..., AfterViewInit, ElementRef, ViewChild, Renderer2, ... } from '@angular/core';
...
export class AdvertisementDirective implements AfterViewInit {
@ViewChild('templateRefName') el: ElementRef;
constructor(
private renderer: Renderer2
) {
}
ngAfterViewInit() {
this.renderer.setStyle(this.el.nativeElement, 'background', 'yellow');
this.renderer.setProperty(this.el.nativeElement, 'innerHTML', '<p>Hello World<p>');
}
}
And in template:
<div #templateRefName></div>