angular pass data to component created & compiled on the fly

Question

A basic input component is created on the fly

const compTag = 'my-input';
const template = `<${compTag}></${compTag}>`;

my-input is an input which implements the ControlValueAccessor and can be assigned with a formControlName directive.

therefore, passing it a formControlName=${config.name}:

const template = `<${compTag} formControlName="${config.name}"></${compTag}>`;

in my on-the-fly component, the following is passed so that the control will find his parent:

viewProviders: [{
  provide: ControlContainer,
  useExisting: FormGroupDirectiv
}],

Verbose:

const tmpCmp = Component({
  template,
  viewProviders: [{
    provide: ControlContainer,
    useExisting: FormGroupDirective
  }],
})(class {});

which is later resolved in DOM as:

<ng-component>
  <my-input formcontrolname="a" ng-reflect-name="a" class="ng-untouched ng-pristine ng-valid">
    <input/>
  </my-input>
</ng-component>

The problem is when I attempt to pass any Object config data to the child component in the template:

const template = `<${compTag} formControlName="${config.name}" config=${config}></${compTag}>`;

the config does pass on to the component, but not parsed properly, and received as config: [Object object]

has anyone stumbled upon?

shuk · Answer 1 · 2019-10-24T13:41:24.323

so this post was extremely helpful.

This way the wrapper component was excused and the formControlName was directly attached to the created component.

extended answer:

what formControlName does per declaration from above (e.g <my-input formControlName="myControl"></my-input>

so does the NgControl class from below, extending the AbstractControlDirective class.

it accepts the parameter 'name' which is the Name in formControlName and by extending this class via a Directive, you can assign the component itself to the valueAccessor function from within.

the connection is made here (brought from the linked post):

const component = this.resolver.resolveComponentFactory<any>(components[this.config.type]);
this.name = this.config.name; // formControlName="..."
this.component = this.container.createComponent(component);
this.component.instance.config = this.config;
this.valueAccessor = this.component.instance; // The part where NgControl is connected via ControlValueAccessor to your component.
this._control = this.formDirective.addControl(this); // The part where the control knows which is its parent in the `ReactiveForm`

angular pass data to component created & compiled on the fly

1 Answers1