@alekart/ajsf-bootstrap3
v2.1.2
Published
Bootstrap 3 framework for Angular JSON Schema Form builder
Downloads
10
Readme
@alekart/ajsf-bootstrap3
Getting started
npm install @alekart/ajsf-bootstrap3
With YARN, run the following:
yarn add @alekart/asjf-bootstrap3
Then import Bootstrap3FrameworkModule
in your main application module if you want to use bootstrap3
UI, like this:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Bootstrap3FrameworkModule } from '@alekart/ajsf-bootstrap3';
import { AppComponent } from './app.component';
@NgModule({
declarations: [ AppComponent ],
imports: [
Bootstrap3FrameworkModule
],
providers: [],
bootstrap: [ AppComponent ]
})
export class AppModule { }
For basic use, after loading JsonSchemaFormModule as described above, to display a form in your Angular component, simply add the following to your component's template:
<json-schema-form
loadExternalAssets="true"
[schema]="yourJsonSchema"
framework="bootstrap-3"
(onSubmit)="yourOnSubmitFn($event)">
</json-schema-form>
Where schema
is a valid JSON schema object, and onSubmit
calls a function to process the submitted JSON form data. If you don't already have your own schemas, you can find a bunch of samples to test with in the demo/assets/example-schemas
folder, as described above.
framework
is for the template you want to use, the default value is no-framwork
. The possible values are:
material-design
for Material Design.bootstrap-3
for Bootstrap 3.bootstrap-4
for 'Bootstrap 4.no-framework
for (plain HTML).
Code scaffolding
Run ng generate component component-name --project @alekart/ajsf-bootstrap3
to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project @ajsf/bootstrap3
.
Note: Don't forget to add
--project @alekart/ajsf-bootstrap3
or else it will be added to the default project in yourangular.json
file.
Build
Run ng build ajsf-bootstrap3
to build the project. The build artifacts will be stored in the dist/
directory.
Publishing
After building your library with ng build ajsf-bootstrap3
, go to the dist folder cd dist/ajsf-bootstrap3
and run npm publish
.
Running unit tests
Run ng test ajsf-bootstrap3
to execute the unit tests via Karma.
Further help
To get more help on the Angular CLI use ng help
or go check out the Angular CLI README.