This chapter will show readers how to use Angular 2 directives related to form creation and how to use a code-based form component to the HTML form. The chapter will use Bootstrap 4 to enhance the look of the form and to indicate invalid input for our web application.
At the end of the chapter, you will have a solid understanding of:
- Bootstrap 4 forms
- Angular 2 form directives
- One-way and two-way data bindings
- How to add validation to a form
- Joining the pieces of our application
Let's start with the following steps:
- Open the Terminal, create a folder called
ecommercem
and open it. - Copy the content of the project from the folder,
chapter_7/1.ecommerce-seed,
into the new project. - Run the following script to install NPM modules:
npm install
- Start the TypeScript watcher and lite server with the following command:
npm start
This script opens the web browser and navigates to the welcome page of the project.