Как через ElementRef добавить и удалить DIV в DOM, через ngOnChanges?

Question

[the5x]

Как через ElementRef добавить и удалить в DOM, через 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

[Антон Швец]

Один раз создать, а потом скрывать/показывать

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

Comments

[the5x]

Мне надо Ангуляр 2+, а Ваша версия явно выше :(

[Антон Швец]

the5x, а ну используй DOM API и не заморачивайся.

[the5x]

Антон Швец, я пытаюсь через @ViewChild, но почему-то undefined

[Антон Швец]

the5x, в директиве нет view.
this.elRef.nativeElement только

[the5x]

Я так пытаюсь добавить. Вроде спиннер добавляется. А вот удалить не могу undefined, подскажите, если это возможно

ngOnChanges(changes: SimpleChange): void {  
    if (changes['ngSpinner'].currentValue) {
      const element = `<div #spinnerElem class="spinner-wrapper">
           <div class="spinner-border text-light" role="status">
               <span class="sr-only">Loading...</span>
           </div>
         </div>`

      this.elRef.nativeElement.innerHTML = element;
    }

    if (!changes['ngSpinner'].currentValue) {
      // this.spinnerElem.nativeElement.remove();
    } 
  }