Angular 2 Element recreation after 3rd party lib DOM interaction (VideoJS)

Question

Which way should i go, when i want to recreate some DOM element after it was removed by 3Rd party lib. As an example, after VideoJS dispose() function, original <video> element is removed.

I have come to this solution with template reference, but i am not able to recreate outlet template after its content has been deleted.

<template #videotemp>
    <video id="video" preload="auto">
        <source [src]="rtmp" type="rtmp/mp4" />
        <source [src]="dash" type="application/dash+xml" />
    </video>
</template>
<template #video [ngTemplateOutlet]="videotemp"></template>

Is this the right way? How can I recreate element from reference Template?

Answer 1

Ok so for anyone strugling with the same problem. Here is my solution. After reading tons of tutorials and discussions TemplateRef and ViewContainerRef seem to be the right way.

There are different approcahes through another directives stc. My solutution is made within the same component.

HTML inside component

<template #videoTemplate>
    <video>
        <source [src]="rtmp" type="rtmp/mp4" />
        <source [src]="dash" type="application/dash+xml" />
    </video>  
</template>
<div #videoAnchor></div>

Code inside template will be cloned AFTER div#videoAnchor

Inside my component

export class SomeComponent {
    @ViewChild('videoTemplate') videoTemplate: TemplateRef<Object>;
    @ViewChild('videoAnchor', {read: ViewContainerRef}) videoAnchor:any;
    ...
    constructor(
        ...
        private viewContainer: ViewContainerRef,
        private ref: ChangeDetectorRef
    ) {}
    somefunction() {
        this.videoAnchor.createEmbeddedView(this.videoTemplate);
        this.ref.detectChanges();
    }
}

We just define ViecontainerRef node as an entry point of cloned TemplateRef object. And thats it. We need to use ChangeDetectorRef to let Angular know that we have changed something, otherwise it wil throw an exception.