In this post we will generate the same form as in part 2, but now we will use the material design look and feel.
The resulting form will look like:
We’ll start by creating a new Angular project at the command prompt (this can take a minute to finish…):
ng new material-demo
And then we go into that directory:
Next we install the material design prerequisites. Execute the following statements at the command prompt:
npm install --save @angular/material
npm install --save @angular/animations
Then we generate a new component inside our Angular project:
ng generate component mat4form
Now we open the project in the Angular Workbench and we make the new component the startup component by replacing the content of “app.component.html” to:
You will see this in the workbench:
Now we need the entity definition that we created in part 1 of this blog series. For this demo we just copy over the “src\model” directory from the previous demo project into this project (same location “src\model”).
Remark: optionally you could recreate the entity manually in this project (just 1 minute of work: see part1), or you could open both projects in the workbench and drag & drop the entity file from the project explorer of that project.
Next we open the file “mat4form.component.html” and then we drag & drop the entity file “customer.wbe” onto the canvas of the file “mat4form.component.html”:
When you drop the entity the form builder will appear. Now make sure that you select the “Material 2+” UI library:
And then press the big “Insert code” button. You will notice that the html & typescript code will be generated on top of some other changes to your project necessary to get everything working.
Now you should be able to serve up you solution, so type at the command prompt:
And go with a browser to the url that is proposed by “ng serve”, in our case: http://localhost:4200/
You should see now the form that was presented at the beginning of this post.