DEV Community

Cover image for 🧱 Angular: How to Create Multiple Components at Once (From Basic to Advanced)
Nelson Garcia Dev.
Nelson Garcia Dev.

Posted on

🧱 Angular: How to Create Multiple Components at Once (From Basic to Advanced)

#angular #webcomponents #programming #webdev

So, have you ever gotten tired of generating components one at a time?
Yeah, me too. That’s why I started looking for smarter ways to automate this process — and now I’m here to share them with you.

📌 Introduction

When developing scalable Angular applications, keeping your components well-structured and organized is crucial.
Instead of generating each one manually using ng generate component, let’s level up and make the process faster, cleaner, and more productive.

📌 Step 1 – Understanding the Basics

✅ What is a Component?

In Angular, a component is a core building block of the user interface. It includes:

  • ts (logic)
  • html (template/view)
  • css/.scss (style)
  • spec.ts (unit test – optional)

✅ How to Create a Component (manually) 

ng generate component components/header
Enter fullscreen mode Exit fullscreen mode

Or simpply:

ng g c components/header
Enter fullscreen mode Exit fullscreen mode

Which generates:

src/app/components/header/
├── header.component.ts
├── header.component.html
├── header.component.scss
└── header.component.spec.ts
Enter fullscreen mode Exit fullscreen mode

🧰 Step 2 – Creating Multiple Components at Once (Intermediate Method)

📦 Option 1: One-liner with a loop (Git Bash, Linux, or Mac) 

for c in header sidebar footer dashboard; do ng g c components/$c; done
Enter fullscreen mode Exit fullscreen mode

This command will quickly generate multiple components inside the components/ folder:

  • header
  • sidebar
  • footer
  • dashboard

📦 Option 2: Using && to chain commands 

ng g c components/register && 
ng g c components/list && 
ng g c components/edit && 
ng g c components/delete
Enter fullscreen mode Exit fullscreen mode

This creates the same result in a straightforward way — great for quick setups.

📦 Option 3: Creating a reusable script in package.json

You can add a script to automate component generation:

{
  "scripts": {
    "component-generator": "ng g c components/register && ng g c components/list && ng g c components/edit && ng g c components/delete"
  }
}
Enter fullscreen mode Exit fullscreen mode

Then just run:

npm run component-generater
Enter fullscreen mode Exit fullscreen mode

✨ Step 3 – Advanced Tips

📍 Add extra options to customize component creation: 

Option           Description
--skip-tests     Does not create the test file
--style=scss     Uses SCSS instead of CSS
--flat           Creates the component without a folder (saves directly in components/)
--standalone     Creates a standalone component (Angular 14+)
Enter fullscreen mode Exit fullscreen mode

Exemplo:

ng g c components/navbar --skip-tests --style=scss --flat
Enter fullscreen mode Exit fullscreen mode

✅ Expected Final Result

By the end of this guide, you’ll have multiple components quickly generated, organized, and ready to use — following solid practices for modularization and automation in Angular.

Thanks so much for reading! I hope this guide saves you time (and sanity 😅).

If you enjoyed this content, leave a ❤️, Save it for later, and Share it with your dev crew!
And if you want to add something, drop a comment and we’ll learn with your contribuition and go to next level. 🚀

✍️ Written by: Nelson Manuel Garcia
Feel free to reach out if you have questions or want to connect! 🎧💻

Top comments (0)