Load component dynamically in Angular 2 using selector

Question

Can we load component dynamically in Angular 2 using it's selector?

Lets say we have a component like below,

 @Component({
    moduleId: module.id,
    selector: 'my-component',
    templateUrl: 'my-component.html',
    styleUrls: ['my-component.css']   
 })
 export class MyComponent{
 }

Can we load this dynamically into a container using it's selector my-component

<div #container ></div>

LoadComponent(selector: string){
    // Load using selector?
}

There may be a need of exporting components in the NgModule and importing the NgModule where we want to load it.

Not sure on how to achieve this, any pointers in right direction would be very helpful.

Thanks in advance!!

You might find this answer useful: http://stackoverflow.com/a/38888009/6680611 — cartant, Sep 20 '16 at 05:12
@cartant The post is talking about creating a component on the fly, my question is if I have imported a module and want to load the component from that without knowing about which module it belongs to, how to do that. So when we use the component in html it is instantiated by compiler right, so something similar should be there. — Madhu Ranjan, Sep 20 '16 at 05:18
Are you wanting to create a HTML template dynamically? If that's the case, I think the linked answer is relevant. If not, I've misunderstood your question. — cartant, Sep 20 '16 at 05:27
Please check this plunker https://plnkr.co/edit/1oVsAjv46UStOZOzQRzu?p=preview. — yurzui, Sep 20 '16 at 07:48
@yurzui: Thanks, that is in right direction, however i am looking for a way were I don't need to know the Module type, Is there a way in which we can get all Modules which are already compiled and is available for use dynamically in which we can check if a particular component is available? — Madhu Ranjan, Sep 20 '16 at 14:02
You can experiment like https://plnkr.co/edit/m6UJz6Xb72uzIBiNipDV?p=preview — yurzui, Sep 20 '16 at 16:07
@MadhuRanjan is there a way to load selector dynamically in html — Vignesh, May 19 '17 at 12:30
How can we pass module to loadComponent function from html using webpack — Vignesh, May 23 '17 at 06:14
Why down vote? Is the question not following guideline please let me know what is that who did down vote did not like?. Please maintain integrity at Stack Overflow. — Madhu Ranjan, May 23 '17 at 14:11

score 1 · Accepted Answer · answered May 19 '17 at 16:43

1

Well I was able to resolve this using below,

constructor(private _compiler: Compiler) {}

loadComponent = (selector: string, module: any): void => {  
  this._compiler.compileModuleAndAllComponentsAsync(module).then(_module => {
    let _componentFactories = _module.componentFactories.filter(_c => {
      // here I am using the selector
      return _c.selector === selector;
    });

    // check if component is available in the module
    if (!!_componentFactories && _componentFactories.length > 0) {
       self.testComponentContainer.clear();
       self.testComponentContainer.createComponent(_componentFactories[0]).instance;                    
    }
  });
}

Hope it helps someone.. !!!

answered May 19 '17 at 16:43

Madhu Ranjan

17,334
7
60
69

can we load the selector dynamically in html like this? <{{item.name}}><{{'/'+item.name}}> – Vignesh May 20 '17 at 04:41
Why downvote? this was solution for my question and I have accepted it, if you have another question or does not resolve your issue, you should write your own question. – Madhu Ranjan May 23 '17 at 14:06
Please maintain integrity at Stack Overflow. – Madhu Ranjan May 23 '17 at 14:12
I tried your sample but the loop is not returning it's looping continuously i don't know what is the problem – Vignesh May 23 '17 at 16:09
@Vignesh, can you create a Plunker for your issue? – Madhu Ranjan May 26 '17 at 13:49
here is my updated Plunker link: https://plnkr.co/edit/dGFtXTz9KMQicXjuB8R5 – Vignesh May 29 '17 at 12:13
Hi @MadhuRanjan I am trying to implement it but its being difficult to understand solution from your code, can you please provide any working code example? It will be really helpful to understand what is `this._compiler.compileModuleAndAllComponentsAsync(module)` and how it works. – sajal rajabhoj Jun 20 '18 at 14:18
also can you please let me know what is `self`? – sajal rajabhoj Jun 20 '18 at 14:44

score 1 · Answer 2 · answered Sep 18 '18 at 17:50

1

suppose your index.html has . then in your .ts or js file, when condition ready, do this: var div = document.getElementById('container');

    div.innerHTML = "<my-component></my-component>"

answered Sep 18 '18 at 17:50

Feng Zhang

1,698
1
17
20

score -2 · Answer 3 · answered Aug 28 '16 at 06:43

You can load any component dynamically using ComponentResolver.
Add following html node into parent template

<div #node></div>

And your component will look like

import { Component, ViewContainerRef, ViewChild, ComponentFactory, ComponentResolver } from '@angular/core';
import { MyComponent} from 'components/my.component';

@Component({
selector: 'app-home',
template: `<h2>Home</h2>
    <div #node></div>
 `
})

export class HomeComponent implements OnInit {
@ViewChild("node", { read: ViewContainerRef }) nodeView;
instance: MyComponent
constructor(private componentResolver: ComponentResolver) {
}

ngOnInit(): void {
    this.componentResolver.resolveComponent(MyComponent)
        .then((factory: ComponentFactory<MyComponent>) => {
             this.instance = this.nodeView.createComponent(factory);
        });
    }
}

Thanks for trying,but the question is on how to load component using it's selector not using it's instance. — Madhu Ranjan, Aug 28 '16 at 08:37
`ComponentResolver` no longer exists in Angular 2 (it didn't when you posted this). — Mud, Oct 14 '16 at 16:16

Load component dynamically in Angular 2 using selector

3 Answers3

Linked