Dynamically Creating Components With Angular 5

Question

I have been using code like this to dynamically create components in my application. These components must support dynamic inputs. But now I tried updating to Angular 5 and ReflectiveInjector is deprecated. I would be very grateful if anyone would know how to help me to reuse this with Angular 5...

import {Component, Input, ViewContainerRef, ViewChild, ReflectiveInjector, ComponentFactoryResolver} from '@angular/core';
import {
  AComponent,
  BComponent,
  CComponent
} from './';

@Component({
  selector: 'dynamic-component',
  entryComponents: [
    AComponent,
    BComponent,
    CComponent
  ],
  template: `
    <div #dynamicComponentContainer></div>
  `
})
export class DynamicComponent {

  currentComponent = null;

  @ViewChild('dynamicPriceItemComponentContainer', { read: ViewContainerRef }) dynamicComponentContainer: ViewContainerRef;

  @Input() set componentData( data: { component: any, inputs: any }) {
    if (!data) {
      return;
    }

    let inputProviders = Object.keys(data.inputs).map((inputName) => {
      return { provide: inputName, useValue: data.inputs[inputName] };
    });

    let resolvedInputs = ReflectiveInjector.resolve(inputProviders);

    let injector = ReflectiveInjector.fromResolvedProviders(resolvedInputs, this.dynamicPriceItemComponentContainer.parentInjector);

    let factory = this.resolver.resolveComponentFactory(data.component);

    let component = factory.create(injector);

    this.dynamicComponentContainer.insert(component.hostView);

    if (this.currentComponent) {
      this.currentComponent.destroy();
    }

    this.currentComponent = component;
  }

  constructor(private resolver: ComponentFactoryResolver) {

  }
}

Ketan Akbari · Accepted Answer · 2018-03-30 12:02:47Z

1

May this give some clue.

constructor(private renderer: Renderer2,
            private viewContainerRef: ViewContainerRef,
            private componentFactoryResolver: ComponentFactoryResolver) {

}

private createdDynamicComponent(): void {
    const factory = this.componentFactoryResolver.resolveComponentFactory(MyComponent);
    const createdComponentComponent = this.viewContainerRef.createComponent(factory);
    this.renderer.appendChild('element where you want append', createdComponentComponent.location.nativeElement);
}

answered Mar 30, 2018 at 12:02

Ketan Akbari

11.3k5 gold badges36 silver badges52 bronze badges

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

Comments

Royalsmed · Accepted Answer · 2018-03-30 12:43:34Z

You need Injector.create Instead on ReflectiveInjector

@Input()
set dynamicContent(dc: { component: any; attribute: any; payload: any }) {
  if (!dc) {
    return;
  }
  const injector = Injector.create({
    providers: [
      {
        provide: dc.attribute,
        useValue: dc.payload
      }
    ],
    parent: this.dynamicComponentContainer.parentInjector
  });
  const factory = this.resolver.resolveComponentFactory(dc.component);
  const component = factory.create(injector);
  this.dynamicComponentContainer.insert(component.hostView);
}

You will of course need to solve the Reflection deprecation when injecting your input name in your actual dynamic children components. The key is to avoid injecting strings:

constructor(@Inject(LabelComponentAttributes) public ca: LabelComponentAttributes) {
  super();
  this.setCurrentStyles();
  this.setCurrentClasses();
}

Group all your input in a class and inject that class. Do not group them in interface as they are available only at runtime in typescript.

cheers

Tomasz Kula · Accepted Answer · 2018-03-30 11:39:12Z

0

It looks like it will be possible in the future with NgComponentOutlet directive. Take a look at this issue. In the mean time maybe you can use ng-dynamic-component?

answered Mar 30, 2018 at 11:39

Tomasz Kula

16.9k3 gold badges72 silver badges82 bronze badges

Collectives™ on Stack Overflow

Dynamically Creating Components With Angular 5

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related