A Standalone Dynamic Form - an Angular 17 implementation

Panos Zafeiropoulos

·

Follow

Published in

Level Up Coding

·

12 min read

·

Mar 7, 2024

81

Listen

Share

A simple yet distinguished Angular 17 (17.2) project of mine. The code is provided in this repo.

Abstract

This is a simple yet distinguished Angular 17 (17.2) project of mine, for a dynamic form implementation using dynamic components.

The form fields/controls metadata are provided as an array of metadata objects. This array is provided dynamically via the instantiation of a respective domain service. The domain service is instantiated via a factory service provider class. The form fields array can be kept updated dynamically with initial values obtained as a row set from the backend.

The dynamic form is a reactive one using independent standalone components that are dynamically loaded at runtime via a helper directive. The dynamic form is also built as a typed form, and the type of each control is obtained from the type of the value of a property of a metadata object.

Furthermore, the form, as well as the candidate dynamic components are based on the Material library, but this can be easily changed, by changing even, just the respective templates.

Angular 17

The project is based on Angular Version 17.2 with Angular Material support. This means that it uses:

• standalone components (no modules),
• signals (for non-backend async operations such as those based on HttpClient), as well as for some cases that replace the @Input decorator, and
• new @-based flow control syntax in component templates

The overview diagram of the project

The project structure and key-components description

`-- src
            `-- app
                |-- about
                |-- app.component.html
                |-- app.component.scss
                |-- app.component.ts
                |-- app.config.ts
                |-- app.routes.ts
                |-- dataObjects
                |   |-- IFormField.ts…