CODEWITHSUNDEEP
angular2-componentsangular2-injectionangular2-render
user3469771
user3469771

Reputation: 21

How to Render an Angular2 Component into a specific dynamically loaded DOM element?

I have a component that dynamically loads and creates a video player with jQuery. After it is done, it looks something like this:

<div id="1613544e-3695-06ed-7201-9cbbe3ded44b" style="z-index: 1;">
   <div class="elite_vp_mainContainer" style="width: 100%; height: 500px; position: absolute; background: rgb(0, 0, 0); z-index: 999999;">
     <div class="elite_vp_videoPlayer" data-state="loading" style="width: 1440px; height: 500px; z-index: 455558;">
        <video class="elite_vp_videoPlayer" preload="none" style="display: none;">
        </video>
        <div class="elite_vp_overlay">
           <img src="https://i.ytimg.com/vi_webp/RsRuJcyppsY/sddefault.webp" id="elite_vp_overlayPoster">
        </div>
   </div>
</div>

I want to dynamically render and inject an angular component as a layer upon this player.

So I've got this piece of code

  const factory = self.componentFactoryResolver.resolveComponentFactory(WinnerOverlayComponent);
  const ref = self.viewContainerRef.createComponent(factory);
  ref.instance.user = self.user;
  ref.instance.stage = self.stage;
  ref.changeDetectorRef.detectChanges();

The viewContainerRef holds a reference to the <div id="1613544e-3695-06ed-7201-9cbbe3ded44b" style="z-index: 1;"> which is the parent of this whole thing.

The thing is, I must inject the overlay component right under elite_vp_videoPlayer

How can I do that? I've been looking all over the place.

Injecting an Angular2 component into a Specific DOM location (through class \ ID)

Thank you all!

Upvotes: 1

Views: 217

Answers (0)

Related Questions