@ngx-dynamic-components/core

NGX Dynamic Components is a configuration based dynamic components library for Angular. That allows you to rapidly create dynamic forms or any other mobile-friendly web layouts.

Any web content can be dynamically rendered from JSON or XML based configuration with a full support of lifecycle hook methods.

@ngx-dynamic-components/core - a core dynamic rendering engine with no dependencies to any external library. It contains all basic HTML components.

Getting started

$3

$3

npm install @ngx-dynamic-components/core --save

$3

``ts
import { DynamicComponentsCoreModule } from '@ngx-dynamic-components/core';
// ...
@NgModule({
// ...
imports: [
// ...
DynamicComponentsCoreModule
],
...
})
export class AppModule { }
`

$3

`ts
import { Component } from '@angular/core';
import { ComponentEvent } from '@ngx-dynamic-components/core';

@Component({
selector: 'app-root',
template:
[xmlUIModel]='xmlUIModel'
[dataModel]='dataModel'
(eventHandlers)="eventHandlers($event)">

,
styles: [
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical
},
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
},
input[type=submit]:hover {
background-color: #45a049;
},
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
max-width: 960px;
margin: auto;
}
],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
xmlUIModel =

;

dataModel = {};

eventHandlers(ev: ComponentEvent) {
if (ev.eventName === 'save') {
console.log('save event', ev, this.dataModel);
}
}
}

``

From the example above you see that have four main properties:
- uiModel - is you XML based configuration or JS Object
- dataModel - data object what you can bind to
- eventHandlers - event handlers function where you can subscribe to any events

$3

Composing and maintaining web forms and responsive web layouts can be tedious job. You will always have similar components with similar design patterns and requirements are usually changing frequently. While ngx-dynamic-components will allow you to:
- define your forms layout and logic at run-time
- load your web pages from the server
- support full web page lifecycle events

$3

There are quite a few other dynamic components library for Angular. e.g. Formly (https://formly.dev), But with our library you can build anything from a very simple contact form to much more complex workflow-driven business web page. Core advantages:
- XML based configuration as well as JSON. When a form gets bigger maintaining JSON configuration becomes very difficult (from our experience). While XML is much more readable human readable and looks very similar to HTML5
- Custom CSS and styling and responsive design very easy to achieve. Just the same as you would do it in HTML. For instance, if you know Bootstrap or any other CSS framework, you can easily leverage this for dynamic rendering.
- a true dynamic nature. You can change UI dynamically with a code-behind scripting logic
- full event life cycle

$3

ngx-dynamic-components was build to power a Worksheet Systems - a low code data management platform. As none of the existing dynamic library served the purpose

Resources

- Home page
- Source Code
- Examples

License

A permissive MIT (c) - FalconSoft Ltd