Create UI elements Dynamically

Ionic Framework ionic-v3
1

Dear All,
I want to create some UI Elements dynamically on ionic view. Each entity will have different Attributes, I will get the Attribute Name, Type, etc from an API call, from the received data i need to create UI elements on Screen. Each Entity can have different Attributes.
For Example, If Entity 1 is having 3 Attributes, then on my screen i need to create UI elements based on the Attribute Type. (Attributes Type could be Input field or Select single or Select multiple). and Attribute Name also changes for each entity.
If Entity 2 is having 4 Attributes, then I need to create 4 ui elements with name of the attributes and type( Input field or select or multi select) based on attribute types.

I checked Angular forms, I feel like it could be used to create similar kind of ui element again and again ( ex:label and Input field). But i need to create different type of fields with different names.

Please guide me.
Thanks in advance.
Thanks!!

2

Angular, especially in production mode, really wants all information needed to bundle a component and its associated template at compile time. Since what you are describing is inconsistent with that, you are going to find yourself in a very long uphill battle against the framework. So I would recommend either searching for another framework that is more amenable to what you are trying to do or rethinking the design completely.

3

See this example: https://stackblitz.com/edit/custom-form-field
And the oficial docs for dynamic component load: https://angular.io/guide/dynamic-component-loader.

1 Like