How to add and remove DIVs to DOM via ElementRef, via ngOnChanges?

Question

Angular

How to add and remove to DOM via ElementRef, via ngOnChanges? Ver: Angular 2+

export class SpinnerDirective {

  @Input() ngIsSpinner: boolean;

  constructor(private elRef: ElementRef, private renderer: Renderer) {}

  ngOnChanges(changes: SimpleChange): void {  
    if (changes['ngIsSpinner'].currentValue) {
      // Добавить div в DOM
    }

    if (!changes['ngIsSpinner'].currentValue) {
      // Удалить div в DOM
    } 
  }
}

Answer 1

Create once, then hide/show

public reveal(overlay: HTMLDivElement): void {
    this.renderer.setStyle(overlay, 'display', '');
  }

  public hide(overlay: HTMLDivElement): void {
    this.renderer.setStyle(overlay, 'display', 'none');
  }

  public createOverlay(el: HTMLElement): HTMLDivElement {
    const { renderer, spinnerSrc, ensurePosition } = this;

    const overlay: HTMLDivElement = renderer.createElement('div');
    renderer.addClass(overlay, 'loading-overlay');

    const img: HTMLImageElement = renderer.createElement('img');
    renderer.addClass(img, 'loading-spinner');
    renderer.setAttribute(img, 'src', spinnerSrc);

    renderer.appendChild(overlay, img);
    renderer.appendChild(el, overlay);

    ensurePosition(el, renderer);

    return overlay;
  }

  private ensurePosition(el: HTMLElement, renderer: Renderer2) {
    const { position } = getComputedStyle(el);
    if (!(['absolute', 'fixed', 'relative'].some(p => p === position))) {
      renderer.setStyle(el, 'position', 'relative');
    }
  }

this.elRef.nativeElement -> el