Angular Workbench form builder part 3: generate a material design form

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:

cd material-demo

Next we install the material design prerequisites. Execute the following statements at the command prompt:

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:

<app-mat4form></app-mat4form>

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:

ng serve

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.