Есть ли способ добавить шаблон ref к сгенерированному html-элементу и добавить hostlistener внутри ng-template

Question

Я использую ngx-bootstrap для создания модального компонента многократного использования с изменяемыми размерами. Модальное содержимое, которое генерируется ng-шаблоном при использовании модального сервиса. Я использую модальный сервис вместо директивы, чтобы я мог открыть один экземпляр модального из родительского компонента. Я пытался использовать Renderer2 для доступа к элементу, но мне не удалось добавить шаблон ref к динамически добавляемым элементам. Есть ли лучший способ приблизиться к этому?

Во-вторых, я использую необработанный JS для добавления элементов дескриптора в DOM, но @Hostlistener не будет регистрировать события, и я не нашел способа добавить атрибут (click) к элементам dom.

open() {

    //   [style.minWidth.px]="minWidth" [style.left.px]="left" [style.top.px]="top"
    this.modalRef = this.modalService.show(this.resizeableModal, Object.assign({}, { class: this.customClassName }));
    document.getElementsByClassName(this.customClassName)[0].setAttribute('id', 'modalDialogue');
    document.getElementById('modalDialogue').children[0].setAttribute('id', 'modalRoot');
    this.modalRoot = document.getElementById('modalRoot');
    this.appendUIHandles();
  }

  appendUIHandles() {
    const classNames = ['ui-resizable-s',
      'ui-resizable-e',
      'ui-resizable-se',
      'ui-resizable-w',
      'ui-resizable-sw'
    ];

    for (let i = 0; i < classNames.length; i++) {
      const node = document.createElement('DIV');
      node.setAttribute('id', classNames[i]);
      this.modalRoot.appendChild(node);
    }
    this.renderer.listen(this.renderer.selectRootElement('#ui-resizable-s'), 'click', (evt) => {
      console.log('Clicking the button', evt);
    });
    this.addStylesToUIHandles();
  }

  addStylesToUIHandles() {
    const classNames = ['ui-resizable-s',
      'ui-resizable-e',
      'ui-resizable-se',
      'ui-resizable-w',
      'ui-resizable-sw'
    ];

    for (let i = 0; i < classNames.length; i++) {
      const node = document.getElementById(classNames[i]);
      if (classNames[i] === 'ui-resizable-s') {
        node.setAttribute('style', 'position: absolute; cursor: e-resize; height: 100%; width: 7px; right: 0px; top: 0;');
        node.addEventListener('click', () => this.initResizeS());
      }
      if (classNames[i] === 'ui-resizable-e') {
        node.setAttribute('style', ' position:absolute; cursor: e-resize; height: 100%; width: 7px; right: 0px; top: 0;');
        node.addEventListener('drag', (event) => this.initResizeE(event));
      }
      if (classNames[i] === 'ui-resizable-se') {
        node.setAttribute('style', 'position:absolute; cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0;');
        node.addEventListener('drag', (event) => this.initResizeSE(event));

      }
      if (classNames[i] === 'ui-resizable-w') {
        node.setAttribute('style', 'position:absolute; cursor: w-resize; height: 100%; width: 7px; left: 0px; top: 0');
        node.addEventListener('drag', (event) => this.initResizeW(event));
      }
      if (classNames[i] === 'ui-resizable-sw') {
        node.setAttribute('style', 'position: absolute; cursor: sw-resize; height: 15px; width: 15px; left: 0; bottom: 0;');
        node.addEventListener('drag', (event) => this.initResizeSW(event));
      }
    }
  }

  public hide() {
    this.modalService.hide(0);
  }


  @HostListener('mousemove', ['$event'])
  onMousemove(event): void {
    console.log('in')
    this.onDrag(event);
    this.onResize(event);
  }