Angular 2 load component using 'selector' dynamically

Question

I am facing an issue in angular 2 for load component based on ' selector ' name.

I want to render component in my popup dynamically. Something like this - Here is the code:

<div>
 <my-selector></my-selector>
</div>

I want to render component inside the div.

Answer 1

Regarding the question and the plunker mentioned in the comments above. To make you selector work, you just have to add the Component in your AppModule like this.

declarations: [ App, PopupComponent, DynamicComponent ]

When you have added the component here, you can use the selector as you want in the App template like this:

<button (click)="openPopup()">Launch demo modal</button>
<hr>
<div>
   <my-selector></my-selector>
</div>
<pre>{{closeResult}}</pre>