How to use Renderer2 to create an element with template reference?

user_3278687 0
Viewed 244

Situation: we use AdapterJS to polyfill some webRTC into internet explorer. All fine and dandy, it correctly replaces <video #someRef> with <object> in ie and works swell.

Problem is if we want to change the video, the video tag is missing.

I can see 2 ways of solving this (without rewriting a lot of logic elsewhere)

  • use Renderer to somehow add <video #someRef> into the template so ViewChild can see it
  • somehow retrieve an ElementRef from the parent (parentRef.nativeElement.children[0] somehow returned as an ElementRef which we need to use elsewhere, not just HTMLVideoElement)

Not sure how to do either, renderer doesn't seem to have a specific way of adding the template reference for viewChild on a new element

And I don't think you can simply declare parentRef.nativeElement.children[0] as an ElementRef since it's missing some stuff.

Any ideas? Hope my question isn't massively confusing

viewchild angular
1 Answers

In case this is handy to someone else:

Ended up using version 2 from the list, wrapping the video and putting the #ref on the parent, so I can reference the video as a child. Everytime I needed to operate on the video, I'd do a selection based on the parent to make sure I always had the current video element referenced.

It is not what I had hoped to be able to pull off, but it worked for our purposes.

Ideally, it would be nice to avoid the situation alltogether and rethink the architecture not to require it, but if all else fails this is an ok workaround.

user_32786870
Related