0

I'd like to create an app made of completely dynamic pages configured by JSON.

I chose ngx-formly for creating dynamic forms, it works nicely, but I could not figure out how to make a step forward and create the screens dynamically, while being able to add dynamic templates and pass form configuration to it. Is it possible? I appreciate every help, advice or code samples.

Goals:

  1. Build an app completely from JSON configuration. AppComponent gets the JSON config on init, builds screen components with given component type, template and data, adds them to router config, and displays Home page.

  2. NOT losing AOT

Simplified config:

import BaseFormScreen, FormScreenLayoutComponent, BaseScreen, HomeScreenLayoutComponent from '';

export const screens: [
    {'title','Form1', 'path':'/form1', 'type':BaseFormScreen, 'template':FormScreenLayoutComponent, 'formdata':{...}},
    {'title','Form2', 'path':'/form2', 'type':BaseFormScreen, 'template':FormScreenLayoutComponent, 'formdata':{...}},
    {'title','Form3', 'path':'/form3', 'type':BaseFormScreen, 'template':FormScreenLayoutComponent2, 'formdata':{...}},
    {'title','Home', 'path':'', 'type':BaseScreen, 'template':HomeScreenLayoutComponent},
]

[BaseScreen] provides base logic and data to its template, i.e. title, logging, services (smart comp, no template)

[BaseFormScreen] extends BaseScreen, builds a dynamic form from input json, and adds submit functionality

[HomeScreenLayoutComponent] template-only component would render navigation buttons on the page, one for each screen,

[FormScreenLayoutComponent] template-only component renders a title, a dynamic form, a submit button, and adds a 'home' button

hans
  • 1
  • Welcome! You have made a thorough specification for your project, but where is the question? Stack Overflow is meant to help coders with questions or problems they have with existing code. Please show us where you are stuck in your code. – kismert Jul 09 '18 at 23:49
  • The question was how to achieve this, my existing code only cared about the inner form configs. But I found a way, I have a ScreenComponent which is able to build itself from configuration passed through router snapshot data, and in router config I set the same ScreenComponent for every path, but with different router data. – hans Jul 13 '18 at 12:12

0 Answers0