Skip to content

Create Form Component

Chapter Objective

Discover avandeced options for generating a new component.

Creating Components

Section titled “Creating Components”
Instructions
Section titled “Instructions”

  1. 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

  2. You should see a new folder called task-form in the src/app directory.

    src
    └─ app
        └─ task-form
           └─ task-form.ts
           └─ task-form.html
           └─ task-form.css

Angular CLI Options

Section titled “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:

Terminal window
ng generate component task-form --flat

or the short version:

Terminal window
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.

Testing

This tutorial doesn’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.