Dynamic Inject html file

Help Requests
1

Hello everyone :slight_smile:

I am quite new in Frontend development, so please don’t be super harsh :slight_smile:

Problem:
Based on value in drop-down list I have to show on the same screen different form (completely different contracts). I have two ideas how to solve this but first how looks dropdown list

public providers = ['None' , 'Something', 'Anything']

<select class="form-control" value.two-way="activeSigningProvider">
    <option repeat.for = "provider of providers">${provider}</option>
</select>
  1. I can write two forms in one html and based on flags enable correct ones
<input disabled.bind="activeSigningProvider !== 'Anything'" class="form-control" type="text"  />
  1. I can have four HTMLs . One is “container” for all three states. Based on value I inject correct HTML using Key/Value collection

I know how to do 1) solution, but I don’t like it. It’s contains magic strings and it’s not nice if I want to expand it with another value. Code will quickly grow messy. So I wanted to do 2nd approach but I have no idea how. I tried googling it… but I think I am using wrong name

Maybe there is even better solution that I cannot came up with :slight_smile:

2

Of course it was typical problem XY so now I know there are compontents so I can do

<here-nice-form if.bind="activeSigningProvider === 'Something'" view-model.ref="HereNiceForm"></here-nice-form>
3

Probably a bit late but it sorta sounds like you could have used compose to dynamically shift the forms into a space, it’s like dynamically loading a component but you don’t have to worry about global resources.

<div if.bind="formName">
   <compose view-model="app/forms/${formName}"></compose>
</div>