@piserve-tech/form-builder-webcomponent

v1.0.10

Published

2 months ago

Distributable web component build for form builder (bundle.js, bundle.css, fonts, icons)

0High
0Medium
0Low

piserve

webcomponent form-builder angular bundle

Using the Form Builder Web Component from npm

Install the npm package:

npm install @piserve-tech/form-builder-webcomponent

Add the following to your src/index.html inside the <head> tag:

<link rel="stylesheet" href="node_modules/@piserve-tech/form-builder-webcomponent/dist/bundle.css">
<script src="node_modules/@piserve-tech/form-builder-webcomponent/dist/bundle.js"></script>

Copy the assets to your project (run after install):
```
node ./node_modules/@piserve-tech/form-builder-webcomponent/copy-assets.js
```
This will copy all required assets to src/assets/form-builder-webcomponent.
Use the web component in your Angular templates:
```
<form-builder-element></form-builder-element>
```

Make sure your AppModule includes CUSTOM_ELEMENTS_SCHEMA:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
// ...existing code...
@NgModule({
  // ...existing code...
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

No Angular imports are needed from the npm package. The web component is loaded globally via the script tag.

AngularFormBuilderComponent

This project was generated with Angular CLI version 16.1.8.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Code scaffolding

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

Form Builder Library

Created a library named formBuilder inside the form builder component project.

Asset Management

To avoid overwriting existing assets, all library assets (icons, fonts, etc.) are copied to a dedicated folder: src/assets/form-builder-webcomponent.

After installing the library, run the following command to copy assets:

node ./node_modules/@piserve-tech/form-builder-webcomponent/copy-assets.js

This will copy all assets from the library's npm package to your app's src/assets/form-builder-webcomponent folder.

You can add this command to your project's postinstall script for automation:

	"scripts": {
		"postinstall": "node ./node_modules/@piserve-tech/form-builder-webcomponent/copy-assets.js"
	}

Library Usage

Inside the library we have created modules and components for the layout design and also a service folder for the API services.

To export a service from the library for accessing it in installed projects, specify the path of the service in the library's package.json file.

If any changes are made to the library, build it using:

ng build formBuilder

After building, update the version of the library in the package.json file of the library.

To publish the library, open a terminal from the formBuilder folder inside the dist folder and use:

npm publish

to publish it to the npm registry.