Inject object into dynamically created component constructor

Question

I have an Angular 7 component:

export class HelloComponent {
  constructor(private data: any) {}
}

And I am creating it dynamically using ComponentFactoryResolver:

private create(data: any) {

  var componentRef = this.componentFactoryResolver
    .resolveComponentFactory(HelloComponent)
    .create(this.injector);

  this.appRef.attachView(componentRef.hostView);

  var element = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;

}

How to inject data object in HelloComponent constructor?

HelloComponent is a class so.. have you tried const hello = new HelloComponent(data); and then .resolveComponentFactory(hello). Not sure if this would work but it makes a hella lotta sense to me — Francisco Santorelli
– Francisco Santorelli, Commented Apr 18, 2019 at 0:23
This angular.io/guide/dynamic-component-loader#resolving-components may help. — Trimantra Software Solution
– Trimantra Software Solution, Commented Apr 18, 2019 at 5:09

onik · Accepted Answer · 2019-04-18 06:54:40Z

1

You have to use custom injector for that

const injector: Injector = ReflectiveInjector.resolveAndCreate(
[{
     provide: 'config', useValue: { 
     value: 'Any value or object here'}
}]);

and in your component use this

export class HelloComponent {
  constructor(@Inject('config') private data: any) {}
}

answered Apr 18, 2019 at 6:54

onik

1,7411 gold badge13 silver badges22 bronze badges

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

Collectives™ on Stack Overflow

Inject object into dynamically created component constructor

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related