Creating components with CLI in Angular - Quick Revision & Summary

Recall & Review

beginner

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

Use ng generate component component-name or the shortcut ng g c component-name to create a new component.

beginner

What files are created when you generate a new Angular component with the CLI?

The CLI creates four files: .ts (TypeScript logic), .html (template), .css or .scss (styles), and .spec.ts (test file).

intermediate

Does the CLI update your Angular module when you generate a component?

No, since Angular 17 the CLI generates standalone components by default and does not add them to the declarations array of any module.

intermediate

How can you create a component without generating a test file using the CLI?

Add the flag --skip-tests to the generate command, like ng g c component-name --skip-tests.

intermediate

What does the --inline-style flag do when creating a component with the CLI?

It puts the component's CSS styles directly inside the TypeScript file instead of creating a separate CSS file.

Which command creates a new Angular component named 'header'?

A ng generate component header

B ng create component header

C ng new component header

D ng add component header

The correct command is ng generate component header or its shortcut ng g c header.

What file is NOT created by default when generating a component?

A component.json

B component.html

C component.ts

D component.spec.ts

The CLI does not create a .json file for components by default.

How do you prevent the CLI from creating a test file?

A --no-test

B --skip-test-file

C --skip-tests

D --no-spec

Use the flag --skip-tests to skip generating test files.

Where does the CLI add the new component automatically?

A In the <code>imports</code> array

B Nowhere (standalone by default)

C In the <code>providers</code> array

D In the <code>declarations</code> array

Since Angular 17, new components are standalone by default and do not get added to any module array.

What does the --inline-template flag do?

A Skips creating a template

B Creates a separate HTML file

C Creates a CSS file inline

D Creates the template inside the TypeScript file

The --inline-template flag puts the HTML template inside the TypeScript file.

Explain how to create a new Angular component using the CLI and what files are generated.

Think about the command and what happens after running it.

Describe how to customize component creation with CLI flags like skipping tests or using inline styles.

Flags change what files or code structure the CLI generates.