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

Для добавления и удаления DIV-элемента в DOM с использованием ElementRef и ngOnChanges вы можете использовать следующий подход.

1. Сначала вам необходимо импортировать необходимые модули и классы из Angular:

import { Component, ElementRef, ViewChild, OnChanges } from '@angular/core';

2. Затем вы можете определить ваш компонент, который реализует интерфейс OnChanges:

@Component({
  selector: 'app-your-component',
  template: `
    <div #divElement></div>
  `
})
export class YourComponent implements OnChanges {
  @ViewChild('divElement', { static: false }) divElement: ElementRef;

  ngOnChanges() {
    // Ваш код для добавления и удаления DIV-элемента
  }
}

3. В функции ngOnChanges() вы можете добавить и удалить DIV-элемент из DOM с использованием свойства nativeElement экземпляра ElementRef:

ngOnChanges() {
  if (condition) {
    const div = document.createElement('div');
    div.innerHTML = 'Новый DIV';
    this.divElement.nativeElement.appendChild(div);
  } else {
    this.divElement.nativeElement.removeChild(this.divElement.nativeElement.firstChild);
  }
}

4. Замените "condition" в коде выше на ваше собственное условие, которое определяет, должен ли быть добавлен или удален DIV-элемент. Вы можете использовать данные, полученные в ngOnChanges(), для этого.

5. И наконец, убедитесь, что ваш компонент используется в других компонентах или внутри шаблона компонента и вызывается метод ngOnChanges() при изменении данных.