angular tutorials

How to create components inside a specific folder with Angular 9 CLI ?

This tutorial guides you on how to create components inside a specific folder with Angular 9 CLI.

Create components inside a specific folder with Angular 9 CLI

The following command will generate all classes for your new component including .spect.ts test files.

Generate new component and its classes

ng generate component <component-name> [options]

(OR)

ng g c <component-name> [options]

Let’s say your current project structure looks like below. Where you have recipes component and its classes. Note, I have skipped .spec.ts test file generation. To skip .spec.ts test files you just need to pass option “–skipTests true

πŸ“‚src
| β€” πŸ“‚ app
| β€” | β€” πŸ“‚ recipes
| β€” | β€” | β€” πŸ“œ recipes.component.html
| β€” | β€” | β€” πŸ“œ recipes.component.ts
| β€” | β€” | β€” πŸ“œ recipes.component.css
| β€” | β€” πŸ“‚ app.component.html
| β€” | β€” πŸ“‚ app.component.ts
| β€” | β€” πŸ“‚ app.component.css
| β€” | β€” πŸ“‚ app.component.spec.ts

Now, you wanted to generate new components recipe-detail, recipe list inside recipes folder and recipe-item component inside recipe-list folder as shown below.

πŸ“‚src
| β€” πŸ“‚ app
| β€” | β€” πŸ“‚ recipes
| β€” | β€” | β€” πŸ“‚ recipe-detail
| β€” | β€” | β€” | β€” πŸ“œ recipe-detail.component.html
| β€” | β€” | β€” | β€” πŸ“œ recipe-detail.component.ts
| β€” | β€” | β€” | β€” πŸ“œ recipe-detail.component.css
| β€” | β€” | β€” πŸ“‚ recipe-list
| β€” | β€” | β€” | β€” πŸ“‚ recipe-item
| β€” | β€” | β€” | β€” | β€” πŸ“œ recipe-item.component.html
| β€” | β€” | β€” | β€” | β€” πŸ“œ recipe-item.component.ts
| β€” | β€” | β€” | β€” | β€” πŸ“œ recipe-item.component.css
| β€” | β€” | β€” | β€” πŸ“œ recipe-list.component.html
| β€” | β€” | β€” | β€” πŸ“œ recipe-list.component.ts
| β€” | β€” | β€” | β€” πŸ“œ recipe-list.component.css
| β€” | β€” | β€” πŸ“œ recipes.component.html
| β€” | β€” | β€” πŸ“œ recipes.component.ts
| β€” | β€” | β€” πŸ“œ recipes.component.css
| β€” | β€” πŸ“‚ app.component.html
| β€” | β€” πŸ“‚ app.component.ts
| β€” | β€” πŸ“‚ app.component.css
| β€” | β€” πŸ“‚ app.component.spec.ts

Before Angular 9 version you need to follow the below steps to create components inside a specific folder.

  • First, you need to generate a module or component using the commandΒ ng g module <module-name> orΒ ng g component<component-name>
  • Change directory in to the new module or new component folderΒ cd <module-name> orΒ cd <component-name>
  • Finally, create component as a child of that parent module or component using commandΒ ng g component <component-name>

Angular 9: Create components inside a specific folder

After Angular 9 you are not required to change directory in order to create components inside a specific folder. You just need to follow below steps.

  • Let’s say you have created recipesΒ component (current project structure).
  • To create components just use the path information in the angular CLI command as shown below. For example, ng g c <module-name or component-name>/ <new-component-name>Β .

The following angular CLI commands createsΒ new components recipe-detail, recipe list inside recipes folder and recipe-item component inside recipe-list folder as shown below.

> ng g c recipes/recipe-detail --skipTests true

CREATE src/app/recipes/recipe-detail/recipe-detail.component.html (28 bytes)
CREATE src/app/recipes/recipe-detail/recipe-detail.component.ts (302 bytes)
CREATE src/app/recipes/recipe-detail/recipe-detail.component.css (0 bytes)
UPDATE src/app/app.module.ts (784 bytes)

> ng g c recipes/recipe-list --skipTests true

CREATE src/app/recipes/recipe-list/recipe-list.component.html (26 bytes)
CREATE src/app/recipes/recipe-list/recipe-list.component.ts (294 bytes)
CREATE src/app/recipes/recipe-list/recipe-list.component.css (0 bytes)
UPDATE src/app/app.module.ts (668 bytes)

> ng g c recipes/recipe-list/recipe-item --skipTests true

CREATE src/app/recipes/recipe-list/recipe-item/recipe-item.component.html (26 bytes)
CREATE src/app/recipes/recipe-list/recipe-item/recipe-item.component.ts (294 bytes)
CREATE src/app/recipes/recipe-list/recipe-item/recipe-item.component.css (0 bytes)
UPDATE src/app/app.module.ts (680 bytes)

That’s it. You have learnt how to create components inside a specific folder with angular CLI in Angular 9.

Hope it helped πŸ™‚

Also See:

References:

Leave a Reply

avatar
  Subscribe  
Notify of