This example app shows how to generate a Material Design form from a JSON Schema using Angular JSON Schema Form.
The app was generated with Angular CLI version 1.5.0.
To create this app yourself, make sure you have Node, NPM, and Angular CLI installed, then enter the following commands in your terminal:
ng new ng-jsf-material-design-seed
cd ng-jsf-material-design-seed
npm install @angular/material
npm install @angular/cdk
npm install hammerjs
npm install angular2-json-schema-form
Follow the instructions to set up Angular Material and add a default theme.
Then edit the following files:
- src/styles.css — configure Angular Material styles
- src/app/app.module.ts — load Angular JSON Schema Form (and Angular Material) modules
- src/app/app.component.ts — set schema and data variables to configure form
- src/app/app.component.html — display form with
<json-schema-form>
tag
Run ng serve
, then navigate to http://localhost:4200/
to see the form.
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory. Use the -prod
flag for a production build.
To get more help on Angular JSON Schema Form, see the Angular JSON Schema Form README.
To get more help on the Angular Material library, see the Angular Material documentation.
To learn more about Material Design, see the Material Design guidelines.
To get more help on the Angular CLI enter ng help
in your terminal, or see the Angular CLI README.