Insert different Angular2 components programmatically

Question

I want to programmatically generate a report composed by multiple distinct components from a JSON file like:

{
    components: [UserStatsComponent, ActivityChartComponent, NetworkGraphComponent]
}

I found this: Angular2: Creating child components programmatically but my use case differs in that I need to represent different types of components, so I can't use a ngFor in my template because not every component have the same directive.

I'm new to Angular2 so I don't really know how to approach this: First I thought about component inheritance but looks like angular2 annotations are not inherited when extending a component's class. Don't know how to solve this using composition either.

Heard something about the content tag but don't really know if it's relevant to this use case.

tldr; How do I dynamically insert different components from an array?

su pregunta no es clara... it creates confusion. would you please make it better? — micronyks, Jan 25 '16 at 11:44
tldr; How do I dynamically insert different components from an array? — Diego Castaño Chillarón, Jan 25 '16 at 11:48
Do you want to go through json object loop and want to make dynamic components encountered? — micronyks, Jan 25 '16 at 11:50
The json object would be parsed somehow inside my main ReportComponent (doesnt matter how I get it), what I mean is that I don't know what children components I will be inserting beforehand. — Diego Castaño Chillarón, Jan 25 '16 at 11:53
If you say you don't know what children component you will be inserting, it means you are saying you don't know how @component decorator will be defined for each component. So, I think It doesn't look straight and simple answer. But hopefully you can take a look at `DynamicComponentLoader` of angular2. But hope somebody else would be able to answer now or later. — micronyks, Jan 25 '16 at 12:20
Yes looks like i'll have to use some kind of factory that takes that json as input and uses the DynamicComponentLoader to populate the view. However, feels like a "generic" or "superclass" component would be the way to go. — Diego Castaño Chillarón, Jan 25 '16 at 12:40
But I wonder with how would you defined @component decorator dynamically for all components to be inserted dynamically. Moreover you don't know how many components will be there in the json object. So pretty awkward as of now. — micronyks, Jan 25 '16 at 12:45
Thought of using DynamicComponentLoader.loadNextToLocation() so the the number of components its no longer relevant. — Diego Castaño Chillarón, Jan 25 '16 at 14:08

score 2 · Accepted Answer · answered Jan 25 '16 at 11:48

To insert components dynamically use the DynamicComponentLoader

@Component({
  selector: 'child-component',
  template: 'Child'
})
class ChildComponent {
}
@Component({
  selector: 'my-app',
  template: 'Parent (<child id="child"></child>)'
})
class MyApp {
  constructor(dcl: DynamicComponentLoader, injector: Injector) {
    dcl.loadAsRoot(ChildComponent, '#child', injector);
  }
}

Insert different Angular2 components programmatically

1 Answers1