List of Controls with their properties provided by ASW form builder
- Header

2. AutoComplete

3. TextBox

4. TextArea

5. Date Picker

List of Controls with their properties provided by ASW form builder
2. AutoComplete
3. TextBox
4. TextArea
5. Date Picker
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.
Below are some prerequisites before install Form Builder
.
Install Angular Material
by running the following command:
ng add @angular/material
Install Bootstrap
source Sass files by running the following command:
npm install bootstrap
Install Form Builder
to set up in the project by running the following command:
npm install @asoftwareworld/form-builder
Import the NgModule for each component you want to use:
import { FormBuilderModule } from '@asoftwareworld/form-builder';
// ...
@NgModule({
imports: [
// shown passing global defaults (optional)
FormBuilderModule,
...
]
// ...
})
export class AppModule {}
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';
or
angular.json
:
"styles": [ "./node_modules/@asoftwareworld/form-builder/theming/theming-bundle.scss" ],
If you are not using the Angular CLI, you can include a theme via a <link>
element in your index.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){
//....
console.log(data);
// do something
}
}
Angular Material more information and Bootstrap more information
controls | description |
---|---|
Header | Headings are defined with the <h1> to <h6> tags. Used as a title of the post, template and resume, etc. |
Autocomplete | The autocomplete is a normal text input enhanced by a panel of suggested relevant options as the user types. |
Textbox | Enable native inputs to be used within a form field. The styles such as the underline, floating label. |
Text area | Enable native inputs to be used within a form field. The styles such as the underline, floating label. |
Datepicker | The datepicker allows users to enter a date either through text input, or by choosing a date from the calendar. |
Select | Allows the user to select only one option using dropdown. |
Multi select | Allows the user to select one or more options using dropdown. |
Radio button | Allows the user to select only one option from a group. |
Checkbox button | Use multi select check box or single checkbox and captures boolean input with an optional indeterminate mode. |
Button | Angular Material interactive button with a range of presentation options. |
Paragraph | Paragraphs are the building blocks of papers. |
Divider | Create a horizontal or vertical line styled with a Angular Material theme |
Slide toggle | Is an on/off control that can be toggled via clicking and draggable switch. |
Grid | Coming soon |
Material icon | Coming soon |
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:
If you have questions or need help please contact us or email asoftwareworld@gmail.com
Twitter: https://twitter.com/asoftwareworld
LinkedIn: https://in.linkedin.com/company/asoftwareworld
Facebook: https://www.facebook.com/asoftwaresworld
Show google ads for Angular application with latest version of Angular.
npm install @asoftwareworld/google-adsense
Use the standard AdSense code in your index.html
file under <head></head>
as you normally would
//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
And then include it in your module (see app.module.ts ):
import { GoogleAdsenseModule } from '@asoftwareworld/google-adsense';
// ...
@NgModule({
imports: [
// shown passing global defaults (optional)
GoogleAdsenseModule.forRoot({
adClient: 'ca-pub-9010581920864857',
adSlot: 1795662914,
}),
...
]
// ...
})
export class AppModule {}
Uses global defaults which can be overriden via inputs
<asw-google-adsense [adClient]="'ca-pub-9010581920864857'" [adSlot]="1795662914" [display]="'inline-block'" [width]="320" [height]="108" ></asw-google-adsense>
input | type | description |
---|---|---|
adClient | string | account ca-pub-XXXXXXXXXXXXXXXX |
adSlot | string/number | ad slot/number |
adFormat | string | adsense ad format |
adRegion | string | older adsense code to make all ads on page the same |
display | string | element display style |
height | number | element height in px |
width | number | element width in px |
layout | string | used for in-feed ads |
layoutKey | string | used for in-feed ads |
pageLevelAds | boolean | enable page-level ads |
timeOutRetry | boolean | on first load sometimes adsense is not ready. retry’s push after x ms |
adtest | string | sets up some sort of google test ad |
className | string | add custom class names to the “asw” element |
MIT License.