Skip to content
Angular Tutorials

Create a form in a dedicated component

Chapter Objectives

  • ✔️
    Generate a new component
    Use the Angular CLI to create a new component.

  • ✔️
    Understand Angular CLI options
    Learn how to configure component generation with the Angular CLI.

Creating Components

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

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

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 options:

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

This avoids creating test files and disables the new Standalone feature. These options were 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 have 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.

🔗 Resources