Skip to content
Learn Angular
Blog

Create a form component

  • ✔️
    Generate a new component
    Get used to the Angular CLI to create new components

  • ✔️
    Understand the Angular CLI options
    Learn how to customize the component generation process with the Angular CLI

Component creation

🎓 Instructions

  1. Run the following command in your terminal:

    Terminal window
    ng generate component task-form

    or the shorthand version:

    Terminal window
    ng g c task-form

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

Angular CLI options

The Angular CLI provides multiple options to customize the component generation process. You can add these options upon 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

If you want some options to be the default for all components, you can add them to the angular.json file located at the root of your project. For the current project, you already have the following options set:

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

It avoids creating test files and deactivate the new Standalone feature. These options were added to the angular.json file when you created the project with the Angular CLI.

This course doesn’t cover testing, that’s a topic for another course.

✔️ What you learned

We used the Angular CLI to create a new component. That’s the second component you created in this project. Such a task is a common task in Angular development, and the Angular CLI makes it easy to create new components. If needed, you can customize the component generation process with the Angular CLI options.

🚦 Quiz

What is the file used to ocnfigure the Angular CLI options for component generation?

  1. angular.json
  2. package.json
  3. tsconfig.json

🔗 Resources