Привязать событие клика к динамически генерируемому контенту (Angular 4)

Question

У меня есть следующая функция, которая в основном генерирует дату и вставляет ее перед div в представлении - мне нужно изменить это, чтобы я могла использовать событие click, используя функцию углового рендеринга, но испытываю трудности с кодом ниже:

generateTimestampDiv(date, $this) {
    let parent = document.getElementsByClassName('ui-datepicker-header');
    let minutes = (date.getMinutes()<10 ? '0' : '') + date.getMinutes();
    let datetime = date.toDateString()+' '+date.getHours()+':'+minutes;

    let content = '<div style="background-color: #fafafa; width:90%;">'+ datetime +'</div>';
    $(content).insertBefore(parent[0]);

    // this bit is incorrect
    this.renderer.listen(content, 'click', (event) => {
        this.userClicked(event, this);
    })
}

Мне нужно изменить функцию, чтобы вставить содержимое в соответствии с функцией, но также прослушать событие события щелчка, чтобы я мог передать событие в функцию userClicked ()

Answer 1

Используйте метод Angle Renderer2 insertBefore

export class AppComponent implements OnInit {
  @ViewChild('clickablediv') el: ElementRef;

  constructor(private _renderer: Renderer2) { }

  ngOnInit() {
    this._renderer.listen(this.el.nativeElement, 'click', (event) => {
      this.generateTimestampDiv(new Date())
    });
  }

  generateTimestampDiv(date) {
    let minutes = (date.getMinutes() < 10 ? '0' : '') + date.getMinutes();
    let datetime = date.toDateString() + ' ' + date.getHours() + ':' + minutes;

    const div = document.createElement('div');
    div.style.backgroundColor = "#fafafa";
    div.style.width = "90%";
    div.innerHTML = datetime;

    this._renderer.insertBefore(this.el.nativeElement.parentNode, div, this.el.nativeElement)
  }
}

demo