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:
Controller:
this.inputs = ['text', 'number'];
------
View:
<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?
Thanks