Angular – Components within Components

It’s good to be back blogging after a long hiatus. :-)

With the earlier versions of Angular creating nested components was not possible but with Angular6+ you can create nested components within components. Here’s how you can create them using the angular-cli. You can also perform the steps manually by creating the needed files one by one under a hierarchical structure as shown below.

Let’s take a look at an example of what we are trying to create.

Why nest Angular Components?

Let’s say we have a “Shopping” feature (as shown in this example below) and we want to have sub-components such as “Shopping-List”, “Shopping-List-Edit” option and so on. Traditionally, you would have created that as a flat list of components all organized under the /app directory. But as the project grows or as you have more team-members added to your project, you project gets more complex and you end up with too many files under /app directory making it difficult to manage and support. So having a hierarchical structure for your components makes sense. This also creates a mental visual as to how each of the components are related.

Angular components

Here is how you will create the nested components under Angular (using the Angular-cli)

// long-form, generates shopping component artifacts
ng generate component shopping
// short-form
ng g c shopping
// Create shopping-list below shopping
// Generates shopping-list artifacts under shopping component
ng g c shopping/shopping-list

// ** Complex Use-Case - Adding Components Into A Different Module **

// Using components with same name (not recommended)
// Let's say you had multiple modules,
// where you may have app.module.ts and leftnav.module.ts
// and you wanted to create this about-us under each module but
// use the same name then you can do the following
ng g c shopping/about-us --module=app.module
ng g c left-nav/about-us --module=leftnav.module
// This will add the newly created components as a member of that particular module.

It’s that simple.

If you find this article useful, consider bookmarking, subscribing and/or sharing it on your favorite social channels so that others can also find and read these articles. I do this out of love and passion to share my ideas, thoughts, findings and knowledge with others. So the more you help me share the more my content can reach others. Thank you for helping spread the word!

Now for Today’s Inspiration:

Three Steps In Cultivating Willpower:

  1. Finish what you begin.

  2. Do a little bit more than you think you can.

  3. Do a little bit better than you think you can.


Published on Web Code Geeks with permission by Venkatt Guhesan, partner at our WCG program. See the original article here: Angular – Components within Components

Opinions expressed by Web Code Geeks contributors are their own.

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!


1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook


and many more ....


I have read and agree to the terms & conditions


Venkatt Guhesan

I work as an Enterprise UI Architect for DataDirect Networks. I have been developing DirectMon, an Enterprise Monitoring and Management Solution for all of the DDN products. Before that I worked at DrFirst engineering an e-prescribing platform for controlled substances
Notify of

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Inline Feedbacks
View all comments
Back to top button