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
– micronyks, Commented Jan 25, 2016 at 11:44
tldr; How do I dynamically insert different components from an array? — Diego Castaño Chillarón
– Diego Castaño Chillarón, Commented Jan 25, 2016 at 11:48
Do you want to go through json object loop and want to make dynamic components encountered? — micronyks
– micronyks, Commented Jan 25, 2016 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
– Diego Castaño Chillarón, Commented Jan 25, 2016 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
– micronyks, Commented Jan 25, 2016 at 12:20

Günter Zöchbauer · Accepted Answer · 2016-01-25 11:48:01Z

2

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);
  }
}

answered Jan 25, 2016 at 11:48

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Insert different Angular2 components programmatically

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related