Angular получить динамически созданный элемент DOM

Question

Я создаю элемент видео в Angular и присоединяю его к DOM. Я могу добавить несколько видео в DOM. Однако попытка получить этот элемент оказывается трудной.

Элемент создается следующим образом:

    const idObject = Math.round(Math.random() * 1000);
    const canvas =  this.canvasComponent.activeCanvas;
    const url = vid.src;
    const videoE = this.canvasRenderer.createElement('video') as HTMLVideoElement;
    videoE.width = vid.videoWidth;
    videoE.height = vid.videoHeight;
    videoE.crossOrigin = 'anonymous';
    videoE.controls = true;
    videoE.id = idObject.toString();
    videoE.hidden = true;
    const source = this.canvasRenderer.createElement('source') as HTMLSourceElement;
    source.src = url;
    source.type = 'video/webm';
    videoE.appendChild(source);

    this.canvasRenderer.appendChild(this.elem.nativeElement, videoE);

canvasRenderer - это angular компонент Renderer2

Я могу легко получить Элемент используя

   document.getElementById(elementid)

Я не могу получить доступ к элементу с помощью Renderer2, ElementRef или ViewChild. Кажется, для этого требуется наличие селектора jquery (#).

Это хороший способ использовать 'document.getElementById' в Angular?

Возможно ли добавить jquery селектор для создаваемого элемента?

Есть ли другой способ получить нужный элемент DOM по идентификатору?