How to Create a Component in Angular Using the Angular CLI: Complete Guide

Run ng generate component <name> (or the shorthand ng g c <name>) from your project root to scaffold a new component with TypeScript, template, styles, and test files automatically.

The Angular CLI provides the fastest way to create a component in Angular projects, generating boilerplate files that follow the framework's official style guidelines. This command-line tool uses schematics defined in the angular/angular repository to ensure consistency across your application architecture.

Generating a Component with ng generate component

The primary command for component creation is ng generate component, which invokes the @schematics/angular:component schematic. This schematic is the default component generator referenced in the workspace configuration.

Basic Syntax

Execute the command from your workspace root:

ng generate component hero

Or use the abbreviated shorthand:

ng g c hero

Both commands create a new directory at src/app/hero/ containing the component files. If your project uses NgModules (non-standalone), the CLI automatically updates the nearest NgModule's declarations array to include the new HeroComponent class.

Files Created by the CLI

Based on the schematic template located at packages/schematics/angular/component/files/__name@dasherize__/__name@dasherize__.component.ts.template, the CLI generates four files by default:

• hero.component.ts — The TypeScript class with @Component decorator
• hero.component.html — The HTML template file
• hero.component.css (or .scss/.less) — The stylesheet file
• hero.component.spec.ts — The Jasmine test specification file

Essential CLI Flags for Component Generation

Modify the generation behavior using these flags as documented in adev/src/content/reference/cli/generate/component.md:

• --standalone — Generates a component with standalone: true, eliminating the need for NgModule declarations
• --inline-template — Embeds the HTML template directly in the template property of the @Component decorator instead of a separate file
• --inline-style — Embeds styles in the styles array within the decorator rather than an external stylesheet
• --skip-tests — Omits the .component.spec.ts test file
• --change-detection=OnPush — Sets the change detection strategy to ChangeDetectionStrategy.OnPush

For example, to create a standalone component with inline templates and no tests:

ng g c user-profile --standalone --inline-template --inline-style --skip-tests

Standalone vs NgModule Components

The CLI handles module registration differently based on the --standalone flag.

Without --standalone: The CLI locates the nearest NgModule in your project tree and automatically appends the new component class to the declarations array. It also updates exports when necessary according to the schematic logic.

With --standalone: The generated component includes standalone: true in its metadata and imports required dependencies directly. No NgModule updates occur, allowing you to use the component by importing it directly where needed.

Customizing Default Schematics in angular.json

You can permanently change default component generation options by editing the schematic configuration in your workspace's angular.json file. According to adev/src/content/reference/configs/workspace-config.md, add a schematics property at the top level:

{
  "schematics": {
    "@schematics/angular:component": {
      "standalone": true,
      "inlineStyle": true,
      "inlineTemplate": true,
      "changeDetection": "OnPush"
    }
  }
}

With this configuration, every future ng g c command will generate standalone components with inline templates and OnPush change detection by default.

Complete Working Example

Follow these steps to create and display a new component:

1. Create the component:

ng g c product-card --standalone --inline-template

2. Resulting TypeScript file (src/app/product-card/product-card.component.ts):

import { Component } from '@angular/core';

@Component({
  selector: 'app-product-card',
  standalone: true,
  template: `<div class="card">{{ title }}</div>`,
  styles: [`.card { border: 1px solid #ccc; }`]
})
export class ProductCardComponent {
  title = 'Product Name';
}

3. Use the component in src/app/app.component.html:

<app-product-card></app-product-card>

4. Serve the application:

ng serve

Navigate to http://localhost:4200/ to see the rendered component. The tutorial at adev/src/content/tutorials/first-app/steps/02-Home/README.md demonstrates this exact workflow for first-app learners.

Summary

• Use ng generate component <name> or ng g c <name> to scaffold components following Angular best practices
• The CLI creates four files by default based on the @schematics/angular:component schematic template
• Add --standalone to create self-contained components that do not require NgModule declarations
• Configure permanent defaults in angular.json under the @schematics/angular:component key
• The CLI automatically updates NgModule declarations for non-standalone components

Frequently Asked Questions

What is the difference between ng generate component and ng g c?

They are functionally identical. The Angular CLI supports command abbreviations where g stands for generate and c stands for component, allowing faster terminal input while executing the same schematic logic.

Does the Angular CLI automatically register new components in a module?

Yes. Unless you specify the --standalone flag, the CLI automatically locates the nearest NgModule and adds the new component class to its declarations array. It also handles adding the component to exports when required by the schematic configuration.

Where does the Angular CLI store default component generation settings?

Default schematic options are stored in your workspace's angular.json file under the schematics property, specifically within the @schematics/angular:component configuration object as documented in adev/src/content/reference/configs/workspace-config.md.

Can I create a component without a test file?

Yes. Append the --skip-tests flag to your generation command to prevent the CLI from creating the .component.spec.ts file. You can also set "skipTests": true in your angular.json schematic defaults to make this permanent.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}