Creating components with CLI in Angular

Introduction

Using the Angular CLI to create components saves time and avoids mistakes. It sets up all files and code structure automatically.

When starting a new feature that needs its own UI part.

When you want to keep your app organized by splitting it into small pieces.

When you want to quickly generate a component with standard code.

When you want to follow Angular best practices without manual setup.

Syntax

Angular

ng generate component <component-name> [options]

# or shorter:
ng g c <component-name> [options]

Replace <component-name> with your desired component name.

You can add options like --inline-style or --inline-template to customize files.

Examples

Creates a new component named user-profile with separate files for template, style, and tests.

Angular

ng generate component user-profile

Creates a dashboard component with template and styles inside the TypeScript file.

Angular

ng g c dashboard --inline-style --inline-template

Creates a button component inside the shared folder and skips creating test files.

Angular

ng g c shared/button --skip-tests

Sample Program

This command creates a new component called welcome-message. It generates four files: TypeScript, HTML, CSS, and a test file. It also updates the app module to include this component automatically.

Angular

ng generate component welcome-message

Important Notes

The CLI automatically updates your app module to declare the new component.

You can use --flat option to create files without a folder.

Run ng help generate component to see all options.

Summary

The Angular CLI helps you create components quickly and correctly.

Use ng generate component followed by the component name.

You can customize the generated files with options like inline styles or skipping tests.