Angular/typescript load component from variable

Question

How can i load compontent from variable? Etc. I have an array

let arr: Array<string> = new Array('<comp1></comp1>','<comp2></comp2>');

in my html temple walk array, and get compontent, but only i see string as ''

<ng-container *ngFor="let item of arr">{{item}}</ngcontainer>

thanks for answers.

angular.io/guide/dynamic-component-loader

Stavm
– Stavm

2019-03-19 15:15:01 +00:00
Commented Mar 19, 2019 at 15:15 — Stavm
– Stavm, Commented Mar 19, 2019 at 15:15
stackoverflow.com/questions/48525649/…

kinny94
– kinny94

2019-03-19 15:43:03 +00:00
Commented Mar 19, 2019 at 15:43 — kinny94
– kinny94, Commented Mar 19, 2019 at 15:43

waterplea · Accepted Answer · 2019-03-19 15:28:15Z

2

You would need an array of types rather than of strings:

const types: ReadonlyArray<Type> = new Array(Comp1Class, Comp2Class);

<ng-container *ngFor="let componentTypeExpression of types">
  <ng-container *ngComponentOutlet="componentTypeExpression"></ng-container>
</ng-container>

Keep in mind they all must be in entryComponents of injector. For lazy modules you can add injector or even customize module factory: https://angular.io/api/common/NgComponentOutlet

answered Mar 19, 2019 at 15:28

waterplea

3,6715 gold badges35 silver badges50 bronze badges

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

2 Comments

LSG Over a year ago

Hello, thanks for answer, but my array in a service in deep. I cant import every item in array. if i call simply <compontent></compontent> in html is work. But i call *ngComponentOutlet="'ClassName'" is not working...

waterplea Over a year ago

This is how you do it in Angular, you would have to refactor your service then, because even if you find some black magic that does what you ask, it would still be dark magic. Here's an Angular library that works with templates in React way by writing HTML in JS as strings, maybe it could help you: blog.angularindepth.com/…

Collectives™ on Stack Overflow

Angular/typescript load component from variable

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related