{"id":23239,"date":"2018-12-03T12:15:53","date_gmt":"2018-12-03T10:15:53","guid":{"rendered":"https:\/\/www.webcodegeeks.com\/?p=23239"},"modified":"2018-12-02T20:12:16","modified_gmt":"2018-12-02T18:12:16","slug":"angular-components-within-components","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-components-within-components\/","title":{"rendered":"Angular – Components within Components"},"content":{"rendered":"

It\u2019s good to be back blogging after a long hiatus. :-)<\/p><\/blockquote>\n

With the earlier versions of Angular creating nested components was not possible but with Angular6+ you can create nested components within components. Here\u2019s 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.<\/p>\n

Let\u2019s take a look at an example of what we are trying to create.<\/p>\n

Why nest Angular Components?<\/h2>\n

Let\u2019s say we have a \u201cShopping\u201d feature (as shown in this example below) and we want to have sub-components such as \u201cShopping-List\u201d, \u201cShopping-List-Edit\u201d 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.<\/p>\n

\"Angular<\/a><\/p>\n

Here is how you will create the nested components under Angular (using the Angular-cli)<\/p>\n

\/\/ long-form, generates shopping component artifacts\r\nng generate component shopping\r\n\/\/ short-form\r\nng g c shopping\r\n\/\/ Create shopping-list below shopping\r\n\/\/ Generates shopping-list artifacts under shopping component\r\nng g c shopping\/shopping-list\r\n\r\n\/\/ ** Complex Use-Case - Adding Components Into A Different Module **\r\n\r\n\/\/ Using components with same name (not recommended)\r\n\/\/ Let's say you had multiple modules,\r\n\/\/ where you may have app.module.ts and leftnav.module.ts\r\n\/\/ and you wanted to create this about-us under each module but\r\n\/\/ use the same name then you can do the following\r\nng g c shopping\/about-us --module=app.module\r\nng g c left-nav\/about-us --module=leftnav.module\r\n\/\/ This will add the newly created components as a member of that particular module.<\/pre>\n
It\u2019s that simple.<\/p>\n
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!<\/p>\n
Now for Today\u2019s Inspiration:<\/p>\n
Three Steps In Cultivating Willpower<\/strong>:<\/p><\/blockquote>\n
    \n
  1. \n
    Finish<\/strong> what you begin.<\/p><\/blockquote>\n<\/li>\n
  2. \n
    Do a little bit more<\/strong> than you think you can.<\/p><\/blockquote>\n<\/li>\n
  3. \n
    Do a little bit better<\/strong> than you think you can.<\/p><\/blockquote>\n<\/li>\n<\/ol>\n
    Cheers!<\/p>\n
    \n\n\n\n
    Published on Web Code Geeks with permission by Venkatt Guhesan, partner at our WCG program<\/a>. See the original article here: Angular – Components within Components<\/a><\/p>\n
    Opinions expressed by Web Code Geeks contributors are their own.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
    It\u2019s 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\u2019s how you can create them using the angular-cli. You can also perform the steps manually by creating the needed files one …<\/p>\n","protected":false},"author":10207,"featured_media":909,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25],"tags":[],"class_list":["post-23239","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-js"],"yoast_head":"\nAngular - Components within Components - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"Interested to learn about Angular components? Check our article explaining how you can create nested components within components in anglular 6.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-components-within-components\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular - Components within Components - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"Interested to learn about Angular components? Check our article explaining how you can create nested components within components in anglular 6.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-components-within-components\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2018-12-03T10:15:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Venkatt Guhesan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Venkatt Guhesan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-components-within-components\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-components-within-components\/\"},\"author\":{\"name\":\"Venkatt Guhesan\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/0584729a09cca6ace5afc14da385fe72\"},\"headline\":\"Angular – Components within Components\",\"datePublished\":\"2018-12-03T10:15:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-components-within-components\/\"},\"wordCount\":354,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-components-within-components\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"articleSection\":[\"Angular.js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-components-within-components\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-components-within-components\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-components-within-components\/\",\"name\":\"Angular - Components within Components - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-components-within-components\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-components-within-components\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"datePublished\":\"2018-12-03T10:15:53+00:00\",\"description\":\"Interested to learn about Angular components? Check our article explaining how you can create nested components within components in anglular 6.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-components-within-components\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-components-within-components\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-components-within-components\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-components-within-components\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Angular.js\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/angular-js\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Angular – Components within Components\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/0584729a09cca6ace5afc14da385fe72\",\"name\":\"Venkatt Guhesan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f2c6eca535021fdc18ed6159f36c7cc7ca82c4ba74eca68fdf701e6fd325d201?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f2c6eca535021fdc18ed6159f36c7cc7ca82c4ba74eca68fdf701e6fd325d201?s=96&d=mm&r=g\",\"caption\":\"Venkatt Guhesan\"},\"description\":\"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\",\"sameAs\":[\"http:\/\/mythinkpond.wordpress.com\/\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/venkatt-guhesan\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular - Components within Components - Web Code Geeks - 2026","description":"Interested to learn about Angular components? Check our article explaining how you can create nested components within components in anglular 6.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-components-within-components\/","og_locale":"en_US","og_type":"article","og_title":"Angular - Components within Components - Web Code Geeks - 2026","og_description":"Interested to learn about Angular components? Check our article explaining how you can create nested components within components in anglular 6.","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-components-within-components\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2018-12-03T10:15:53+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","type":"image\/jpeg"}],"author":"Venkatt Guhesan","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Venkatt Guhesan","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-components-within-components\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-components-within-components\/"},"author":{"name":"Venkatt Guhesan","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/0584729a09cca6ace5afc14da385fe72"},"headline":"Angular – Components within Components","datePublished":"2018-12-03T10:15:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-components-within-components\/"},"wordCount":354,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-components-within-components\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","articleSection":["Angular.js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-components-within-components\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-components-within-components\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-components-within-components\/","name":"Angular - Components within Components - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-components-within-components\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-components-within-components\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","datePublished":"2018-12-03T10:15:53+00:00","description":"Interested to learn about Angular components? Check our article explaining how you can create nested components within components in anglular 6.","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-components-within-components\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-components-within-components\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-components-within-components\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-components-within-components\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"Angular.js","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/angular-js\/"},{"@type":"ListItem","position":4,"name":"Angular – Components within Components"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/0584729a09cca6ace5afc14da385fe72","name":"Venkatt Guhesan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f2c6eca535021fdc18ed6159f36c7cc7ca82c4ba74eca68fdf701e6fd325d201?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f2c6eca535021fdc18ed6159f36c7cc7ca82c4ba74eca68fdf701e6fd325d201?s=96&d=mm&r=g","caption":"Venkatt Guhesan"},"description":"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","sameAs":["http:\/\/mythinkpond.wordpress.com\/"],"url":"https:\/\/www.webcodegeeks.com\/author\/venkatt-guhesan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/23239","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/10207"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=23239"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/23239\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/909"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=23239"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=23239"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=23239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}