基于属性选择器动态创建组件

Question

Context

In my application, admins can freely configure some forms that needs to be compiled by other users. Those forms can have an arbitrary number of inputs of predefined types (like integers, checkboxes, text and so on...)

This configuration comes from the server in this way (exemplified):

{ fields: [
   { type: "typeA", maxValue: 50, ...},
   { type: "typeB", maxValue: 70, ...},
   { type: "typeC", maxValue: 40, ...},
   ...
]}

To handle this, i built a number of input components with an attribute selector:

@Component({
  selector: 'component[type=typeA]',
  template: `
    <mat-form-field class="w100p" [floatLabel]="label != null ? 'auto' : 'never'">
    ....
`

---

The Problem

How can i build a component via attribute selector specified in a variable ? I already tried with:

<div> 
  <component type="typeInVariable"></component> 
</div>

where typeInVariable has value typeB , but angular returns me an error: Template parse errors: 'component' is not a known element:

How can i solve this? I also have created a stackblitz sample here .

Answer 1

Perhaps you should use dynamic components here.

Some references:

https://angular.io/guide/dynamic-component-loader

https://netbasal.com/things-worth-knowing-about-dynamic-components-in-angular-166ce136b3eb

I have had a similar requirement and it worked for me. Let me know if you need any more explanation.