In this post we will generate an Angular form based on the entity that we created in part 1 from this series. The result will look like:
We start by creating a new component called “bs4form” (bootstrap 4 form). At the command prompt we type:
ng generate component bs4form
This will create 4 files (css, html, spec.ts, ts):
If we double click in the workbench on the newly created “bs4form.component.ts” file, then we can see the selector that we can use in order to visualise this component:
Now we use this selector in the main app.component.html file:
By doing this, our new bs4form component will be visualised. But at this moment, it’s not doing a lot.
Now we open the file “bs4form.component.html” and delete everything in it. Next we drag & drop the entity file “customer.wbe” that we created in part 1 from the project explorer on the left onto the “bs4form.component.html” canvas in the middle. (drag & drop = press and hold the left mouse button)
The Angular Workbench form builder will appear. At this moment we won’t change any other settings, we will just press the button “Insert code”.
You will notice that the tool generated a lot of html:
Also notice on the left side (project explorer) that the tool changed the Typescript file. The tool will create the minimum code needed to get the form working.
Time for testing! Type “ng serve” at the command prompt:
Remark: if “ng serve” was already running before the drag & drop operation for the form generation, then be sure to restart it at this moment.
And now open a browser and type in the url: http://localhost:4200/
You should see the form that was presented in the beginning of this post! When you fill in this form:
And press the “Submit” button, you’ll see:
Conclusion: with a minimum of Angular knowledge we created a working Bootstrap 4 form.
In the coming posts we’ll demonstrate the same for other UI libraries such as Ionic & Angular Material. And we’ll demonstrate more Angular Workbench features.