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>