Creating components with CLI in Angular - Visual Walkthrough

Concept Flow - Creating components with CLI

Open Terminal

↓

Run CLI Command

↓

Angular CLI Generates Files

↓

Component Files Created

↓

Component Registered Automatically

↓

Use Component in App

This flow shows how running the Angular CLI command creates component files and registers them automatically for use.

Execution Sample

Angular

ng generate component my-new-component

// or shorthand
ng g c my-new-component

This command creates a new Angular component named 'my-new-component' with all necessary files.

Execution Table

Step	Action	CLI Output	Files Created	Component Registered
1	Run command 'ng generate component my-new-component'	Starting component generation...	None yet	No
2	CLI creates folder 'my-new-component'	Created folder src/app/my-new-component	Folder created	No
3	CLI creates component files	Created my-new-component.component.ts, .html, .css, .spec.ts	4 files created	No
4	CLI updates app module	Updated app.module.ts to declare MyNewComponent	Files unchanged	Yes
5	Component ready to use	Generation complete	Files exist	Yes

💡 Component files created and registered in app module, ready for use.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
Files in src/app/my-new-component	None	Folder created	4 files created	4 files exist	4 files exist
app.module.ts declarations	No MyNewComponent	No	No	MyNewComponent added	MyNewComponent declared

Key Moments - 3 Insights

Why do we see new files created after running the CLI command?

The CLI generates all necessary files for the component (TypeScript, HTML, CSS, test) as shown in execution_table step 3.

How does the component become usable in the app automatically?

The CLI updates app.module.ts to declare the new component, making it usable without manual registration (see step 4).

Can we use a shorthand for the generate component command?

Yes, 'ng g c my-new-component' is a shorthand for 'ng generate component my-new-component' as shown in execution_sample.

Visual Quiz - 3 Questions

Look at the execution table, at which step are the component files created?

A Step 3

B Step 2

C Step 4

D Step 5

💡 Hint

Check the 'Files Created' column in the execution_table rows.

According to variable_tracker, when is the component declared in app.module.ts?

A After Step 3

B After Step 4

C After Step 2

D At Start

💡 Hint

Look at the 'app.module.ts declarations' row in variable_tracker.

If you run 'ng g c new-comp', what will happen according to the concept flow?

A Nothing, CLI does not recognize shorthand

B CLI only creates files but does not register component

C CLI creates component files and registers component

D CLI deletes existing components

💡 Hint

Refer to concept_flow and execution_sample showing shorthand usage.

Concept Snapshot

Angular CLI creates components quickly:
- Run 'ng generate component name' or 'ng g c name'
- CLI creates folder and 4 files (.ts, .html, .css, .spec.ts)
- CLI updates app.module.ts to declare component
- Component ready to use without manual setup
- Saves time and avoids errors

Full Transcript

This visual execution shows how to create an Angular component using the CLI. First, you open the terminal and run the command 'ng generate component my-new-component' or its shorthand 'ng g c my-new-component'. The CLI then creates a new folder with four files: the TypeScript file, HTML template, CSS stylesheet, and test file. Next, it automatically updates the app.module.ts file to declare the new component, so you don't have to do it manually. Finally, the component is ready to be used in your Angular app. The execution table tracks each step, showing file creation and registration. The variable tracker shows how files and declarations change over time. Key moments clarify why files appear and how the component becomes usable. The quiz tests understanding of when files are created, when the component is declared, and the effect of shorthand commands. This process saves time and helps beginners avoid mistakes when adding components.

Practice

1. What command do you use to create a new Angular component using the CLI?

easy

A. ng build component component-name

B. ng create component component-name

C. ng new component component-name

D. ng generate component component-name

Solution

1. Step 1: Understand Angular CLI commands

   The Angular CLI uses ng generate to create new files and features.

2. Step 2: Identify the correct syntax for creating components

   To create a component, the command is ng generate component followed by the component name.

3. Final Answer:

   ng generate component component-name -> Option D

4. Quick Check:

   Use ng generate component to create components [OK]

Hint: Remember: 'generate' creates, 'create' is incorrect here [OK]

Common Mistakes:

• Using 'ng create' instead of 'ng generate'
• Confusing 'ng new' which creates a new project
• Using 'ng build' which compiles the app

2. Which of the following is the correct syntax to generate a component named header using Angular CLI?

easy

A. ng generate component header

B. ng generate component-header

C. ng generate component:header

D. ng generate component/header

Solution

1. Step 1: Check the correct command format

   The Angular CLI expects the component name as a simple argument after the command.

2. Step 2: Identify the valid component name format

   Component names should be simple words or camelCase without special characters like ':' or '/'.

3. Final Answer:

   ng generate component header -> Option A

4. Quick Check:

   Use space, not symbols, between command and name [OK]

Hint: Use space after 'component' for name, no symbols [OK]

Common Mistakes:

• Using symbols like ':' or '/' in component name
• Hyphenating the command instead of the name
• Confusing command syntax with file paths

3. What files are created when you run ng generate component footer in an Angular project?

medium

A. footer.component.js, footer.component.html, footer.component.css

B. footer.ts, footer.html, footer.css, footer.spec.ts

C. footer.component.ts, footer.component.html, footer.component.css, footer.component.spec.ts

D. footer.component.ts, footer.html, footer.css, footer.spec.js

Solution

1. Step 1: Recall Angular component file structure

   Angular components generate four files: TypeScript, HTML, CSS, and a test spec file, all with the component name prefix.

2. Step 2: Match the correct file extensions and naming

   The files have extensions .ts, .html, .css, and .spec.ts with the component name and '.component' in the filename.

3. Final Answer:

   footer.component.ts, footer.component.html, footer.component.css, footer.component.spec.ts -> Option C

4. Quick Check:

   Angular components create 4 files with .component and correct extensions [OK]

Hint: Remember 4 files: .ts, .html, .css, .spec.ts [OK]

Common Mistakes:

• Missing the .spec.ts test file
• Using .js instead of .ts
• Omitting '.component' in filenames

4. You ran ng generate component nav-bar but got an error. What is the likely cause?

medium

A. You must run the command inside an Angular project folder

B. Component names cannot contain hyphens

C. The CLI command should be ng create component nav-bar

D. Component names must be uppercase

Solution

1. Step 1: Check the environment for running CLI commands

   Angular CLI commands must be run inside an Angular project folder where configuration files exist.

2. Step 2: Verify the command syntax and naming rules

   Hyphens are allowed in component names, and the command is ng generate component, not ng create. Component names can be lowercase.

3. Final Answer:

   You must run the command inside an Angular project folder -> Option A

4. Quick Check:

   Run CLI commands inside Angular project folder [OK]

Hint: Always run CLI commands inside your Angular project folder [OK]

Common Mistakes:

• Trying to run commands outside the project folder
• Using 'ng create' instead of 'ng generate'
• Thinking hyphens are invalid in names

5. You want to create a component named userProfile inside a folder features using Angular CLI. Which command correctly does this?

hard

A. ng generate component features userProfile

B. ng generate component features/userProfile

C. ng generate component features-userProfile

D. ng generate component userProfile/features

Solution

1. Step 1: Understand folder structure in CLI commands

   To create a component inside a folder, specify the folder path before the component name separated by a slash.

2. Step 2: Identify the correct command syntax

   The correct syntax is ng generate component features/userProfile to place the component inside the 'features' folder.

3. Final Answer:

   ng generate component features/userProfile -> Option B

4. Quick Check:

   Use slash to specify folder path before component name [OK]

Hint: Use folder/componentName with slash to create nested components [OK]

Common Mistakes:

• Swapping folder and component name order
• Using space instead of slash for folder path
• Hyphenating folder and component name incorrectly