CODEWITHSUNDEEP
angularangular-directiveangular-dynamic-components
Hassan Ahmed
Hassan Ahmed

Reputation: 83

How to add generic component in angular 8

in my angular application i am dealing with a lot of component that dynamically rendered in run time, but i must specify the component before compiling to inject it in the run time, is there is away to load component by it's name as string ... say ... i have two component FirstComponent And SecondComponent can i store the name of them in an array and them by user action decide which component to be rendered, and it don't want to use if condition on the name or something like this. i want something run generic with it's own in case i change the array or add new component to the array i don't want to change the code wrote. Thanks A Lot In Advance... And i am using ng-dynamic-component for adding dynamic component to the page, if there is a way does this library implement it.

Upvotes: 0

Views: 556

Answers (1)

Saloo
Saloo

Reputation: 816

You can use ViewContainerRef.

It is well explained int his tutorial.

https://medium.com/front-end-weekly/dynamically-add-components-to-the-dom-with-angular-71b0cb535286

    classNames.forEach(type=> {
           const factory = this.resolver.resolveComponentFactory(type);
           const compRef = this.vcRef.createComponent(factory);
             });
  • vcRef refers to object of ViewContainerRef.
  • resolver refers to ComponentFactoryResolver

Upvotes: 0

Related Questions