ASW Form Builder

ASW Form Builder helps you with rapid development and designed web forms which includes several controls. The key feature of Form Builder is to make your content attractive and effective. We can customize our control at run time and preview the same before final submission.

Form Builder is compatible with the latest version of Angular and Angular Material. Only a few clicks can create an attractive web form and provide a JSON Schema to render all controls.

API Demo


Below are some prerequisites before install Form Builder.

Step 1: Install Angular Material

Install Angular Material by running the following command:

ng add @angular/material

Step 2: Install Bootstrap

Install Bootstrap source Sass files by running the following command:

npm install bootstrap

Step 3: Install ASW Form Builder

Install Form Builder to set up in the project by running the following command:

npm install @asoftwareworld/form-builder

Step 4: Import the component modules

Import the NgModule for each component you want to use:

import { FormBuilderModule } from '@asoftwareworld/form-builder';
// ...

  imports: [
    // shown passing global defaults (optional)
  // ...
export class AppModule {}

Step 5: Include a theme

Including a theme is required to apply the form builder and controls design.

You can include this theme in component SCSS or CSS files to not use this globally in your application.

@import '~@asoftwareworld/form-builder/theming/theming-bundle.scss';

If you’re using the Angular CLI, and you want to use themes globally in your application. Then you can add this to your styles.css or angular.json:

styles.css or styles.scss:

@import '~@asoftwareworld/form-builder/theming/theming-bundle.scss';



"styles": [

If you are not using the Angular CLI, you can include a theme via a <link> element in your index.html.

Add a selector to HTML

In your template, use the component selector:

<asw-form-builder (publishClick)="saveJsonData($event)"></asw-form-builder>

Define in your component to get published event :

export class AppComponent {
  title = 'ASW Form Builder Demo';

  saveJsonData(data: any){
    // do something


Angular Material more information and Bootstrap more information

List of Controls available

HeaderHeadings are defined with the <h1> to <h6> tags. Used as a title of the post, template and resume, etc.
AutocompleteThe autocomplete is a normal text input enhanced by a panel of suggested relevant options as the user types.
TextboxEnable native inputs to be used within a form field. The styles such as the underline, floating label.
Text areaEnable native inputs to be used within a form field. The styles such as the underline, floating label.
DatepickerThe datepicker allows users to enter a date either through text input, or by choosing a date from the calendar.
SelectAllows the user to select only one option using dropdown.
Multi selectAllows the user to select one or more options using dropdown.
Radio buttonAllows the user to select only one option from a group.
Checkbox buttonUse multi select check box or single checkbox and captures boolean input with an optional indeterminate mode.
ButtonAngular Material interactive button with a range of presentation options.
ParagraphParagraphs are the building blocks of papers.
DividerCreate a horizontal or vertical line styled with a Angular Material theme
Slide toggleIs an on/off control that can be toggled via clicking and draggable switch.
GridComing soon
Material iconComing soon

Browser Support

Latest ✔Latest ✔Latest ✔Latest ✔Latest ✔11 ✔

Report a bug

We use GitHub Issues as the official bug tracker for the ASW Form Builder. Here are some advices for our users that want to report an issue:

  1. Make sure that you are using the latest version of the ASW Form Builder.
  2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
  3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.

Technical Support or Questions

If you have questions or need help please contact us or email



Social Media




ASW Google Adsense

Show google ads for Angular application with latest version of Angular.


npm install @asoftwareworld/google-adsense

Add google adsense code

Use the standard AdSense code in your index.html file under <head></head> as you normally would


Import NgModule

And then include it in your module (see app.module.ts ):

import { GoogleAdsenseModule } from '@asoftwareworld/google-adsense';
// ...

  imports: [
    // shown passing global defaults (optional)
      adClient: 'ca-pub-9010581920864857',
      adSlot: 1795662914,
  // ...
export class AppModule {}

Show Ad

Uses global defaults which can be overriden via inputs



adClientstringaccount ca-pub-XXXXXXXXXXXXXXXX
adSlotstring/numberad slot/number
adFormatstringadsense ad format
adRegionstringolder adsense code to make all ads on page the same
displaystringelement display style
heightnumberelement height in px
widthnumberelement width in px
layoutstringused for in-feed ads
layoutKeystringused for in-feed ads
pageLevelAdsbooleanenable page-level ads
timeOutRetrybooleanon first load sometimes adsense is not ready. retry’s push after x ms
adteststringsets up some sort of google test ad
classNamestringadd custom class names to the “asw” element


MIT License.