Creating components with CLI in Angular - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a new Angular component using the CLI.

Angular

ng generate [1] my-new-component

Drag options to blanks, or click blank then click option'

Acomponent

Bservice

Cmodule

Ddirective

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'service' instead of 'component' will create a service, not a component.

Using 'module' or 'directive' will create different Angular elements.

The Angular CLI command ng generate component creates a new component.

2fill in blank

medium

Complete the code to create a component with inline styles using the CLI.

Angular

ng generate component my-inline-style --[1]

Drag options to blanks, or click blank then click option'

Askip-tests

Bflat

Cinline-style

Dinline-template

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'inline-template' affects the template, not styles.

Using 'skip-tests' skips test file creation, unrelated to styles.

The --inline-style flag tells Angular CLI to put styles inside the component file.

3fill in blank

hard

Fix the error in the command to create a component without a separate folder.

Angular

ng generate component my-component --[1]

Drag options to blanks, or click blank then click option'

Aflat

Binline-style

Cskip-import

Dexport

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'skip-import' skips module import but does not affect folders.

Using 'inline-style' affects styles, not folders.

The --flat flag creates the component files in the current folder without a new folder.

4fill in blank

hard

Fill both blanks to create a component with inline template and skip test files.

Angular

ng generate component my-special --[1] --[2]

Drag options to blanks, or click blank then click option'

Ainline-template

Bskip-tests

Cflat

Dexport

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing 'flat' with skipping tests.

Using 'export' does not affect templates or tests.

--inline-template puts the template inside the component file.
--skip-tests prevents creating test files.

5fill in blank

hard

Fill all three blanks to create a component with inline template, inline styles, and no test files.

Angular

ng generate component fancy --[1] --[2] --[3]

Drag options to blanks, or click blank then click option'

Aflat

Bskip-tests

Cinline-style

Dinline-template

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up 'flat' with inline flags.

Forgetting to skip tests when desired.

--inline-template puts the template inside the component file.
--inline-style puts styles inside the component file.
--skip-tests prevents creating test files.