Using a variable as an html element tag


Hi there

Is it possible to do something like:

<{{type}} ...></{{type}}>

like you can do in most templating languages?

If not, or if there is a better pattern, here is my current situation:

I have the following classes:

  • InputComponent - parent class for custom input types (interface)
  • MumbleInputComponent - implemented InputComponents (e.g. TextInputComponent)
  • InputFactoryComponent - a class that lets me summon any component using a similar interface.

Example (dumbed down) usage would be to have a list of input types I want, then render them out easily:

this.inputs = ['text', 'number'];
<input-factory *ngFor="let input of inputs" [type]="input"></input-factory>

This would render out a text input then a number input. This is really nice and easy for things like creating a form designer.

The way I currently have my InputFactoryComponent view laid out isn’t what I would call optimal. It looks something like this:

<text-input *ngIf="type == 'text'"></text-input>
<number-input *ngIf="type == 'number'"></number-input>

The problem is I have many different input types, and they all have the exact same inputs: model, options, label, disabled. So when I want to change something, there is a decent amount of copy-pasting that goes on.

Is there a more optimal way of doing this?