Create Form Component

Chapter Objectives

Generate a new component
Use the Angular CLI to create a new component.
Create a form structure
Build a form to collect task information from users.
Style the form
Apply styling to make the form visually appealing and user-friendly.

Creating Components

Run the following command in your terminal:
Terminal window
```
ng generate component task-form
```
or the short version
Terminal window
```
ng g c task-form
```
You should see a new folder called task-form in the src/app directory.

Angular CLI Options

The Angular CLI provides several options to customize the component generation process. You can add these options when running the previous command. For example, to avoid generating a component in a new folder, you can run the following command:

ng generate component task-form --flat

ng g c task-form --flat

If you want certain options to be set by default for all components, you can add them to the angular.json file located at the root of your project.

For the current project, we have already defined the following option:

"@schematics/angular:component": {
  "skipTests": true,
},

This avoids creating test files to reduce the complexity of the current tutorial. The option was added to the angular.json file when we created the project with the Angular CLI.

In this workshop, you won’t cover knowledge about testing. This will be an important topic to master later.

What you've learned

You used the Angular CLI to create a new component. This is the second component you’ve created in this project. Such an action is common in Angular development, and the Angular CLI makes this process easier and more efficient. If needed, you can customize the component generation process with Angular CLI options.

Angular CLI: Component Generation Documentation