{"id":90490,"date":"2019-04-10T07:00:17","date_gmt":"2019-04-10T04:00:17","guid":{"rendered":"http:\/\/www.javacodegeeks.com\/?p=90490"},"modified":"2019-04-07T23:34:55","modified_gmt":"2019-04-07T20:34:55","slug":"angular-child-routes-example","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/2019\/04\/angular-child-routes-example.html","title":{"rendered":"Angular Child Routes Example"},"content":{"rendered":"<p>Welcome readers, in this tutorial, we will learn the basic concept behind <strong>Routing<\/strong> and <strong>Child Routes<\/strong> in angular.<\/p>\n<h2>1. Introduction<\/h2>\n<p><strong>Routing<\/strong> in angular is an essential part of the angular framework contained in the <code>@angular\/router<\/code> package. It,<\/p>\n<ul>\n<li>Helps developers build single page applications with multiple states and views using routes and components<\/li>\n<li>Allows client-side navigation and routing between various components<\/li>\n<li>Allows lazy loading of modules<\/li>\n<li>Add router guards for client-side protection and allow or disallow access to the components or modules<\/li>\n<li>Various path matching strategies (i.e. <em>prefix<\/em> and <em>full<\/em>) to tell the router how to match a specific path to a component<\/li>\n<li>Easy access to route and query parameters<\/li>\n<\/ul>\n<h3>1.1 Routes and Paths in Angular Routing<\/h3>\n<p>In angular, a <strong>route<\/strong> is an object that provides information about which component maps to a specific path. A <strong>path<\/strong> is a fragment of a url that determines where exactly the resource is located the user wants to access. In angular, developers can define a route using route configurations or instance of the <a href=\"https:\/\/angular.io\/api\/router\/Route\" target=\"_blank\" rel=\"noopener noreferrer\">Router<\/a> interface. Each route has the following properties i.e.<\/p>\n<ul>\n<li><code>path<\/code>: Specifies the path of the route<\/li>\n<li><code>pathMatch<\/code>: Specifies the matching strategy (i.e. <em>prefix<\/em> or <em>full<\/em>)<\/li>\n<li><code>component<\/code>: Specifies the component that is mapped to a route<\/li>\n<li><code>redirectTo<\/code>: Url which users will be redirected to if a route is a matched<\/li>\n<\/ul>\n<p>For instance,<\/p>\n<pre class=\"brush:html; wrap-lines:false;\">{ path: 'products', component: ProductlistComponent }\n<\/pre>\n<h3>1.2 Router Outlet<\/h3>\n<p>The <code>router-outlet<\/code> tag in angular is a directive exported by the <code>RouterModule<\/code> and acts as a placeholder to the router where it needs to insert the matched components. It is represented by the following syntax.<\/p>\n<pre class=\"brush:html; wrap-lines:false;\">&lt;router-outlet&gt;&lt;\/router-outlet&gt;\n<\/pre>\n<p>Always remember, an angular router can support more than one outlet in the same application. The main outlet is called as a <em>primary outlet<\/em> and other outlets are called <em>secondary outlets<\/em>. Now open the visual studio code and let us see how to implement this tutorial in angular 6 frameworks.<\/p>\n<h2>2. Angular Child Routes Example<\/h2>\n<p>Here is a systematic guide for implementing this tutorial.<\/p>\n<h3>2.1 Tools Used<\/h3>\n<p>We are using Visual Studio Code and Node Terminal to compile and execute the angular code on a browser.<\/p>\n<h3>2.2 Project Structure<\/h3>\n<p>In case you are confused about where you should create the corresponding files or folder, let us review the project structure of the angular application.<div style=\"display:inline-block; margin: 15px 0;\"> <div id=\"adngin-JavaCodeGeeks_incontent_video-0\" style=\"display:inline-block;\"><\/div> <\/div><\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"378\" height=\"504\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/04\/angular-routing-childroutes-project-structure-guide-img-1.jpg\" alt=\"Angular Child Routes - Application Structure\" class=\"wp-image-90491\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/04\/angular-routing-childroutes-project-structure-guide-img-1.jpg 378w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/04\/angular-routing-childroutes-project-structure-guide-img-1-225x300.jpg 225w\" sizes=\"(max-width: 378px) 100vw, 378px\" \/><figcaption>Fig. 1: Application Structure<\/figcaption><\/figure>\n<\/div>\n<h2>3. Creating Angular application<\/h2>\n<p>Run the <code>ng new angular-routing-child-routes-example<\/code> command in the npm console to create a new angular project. Once the new project is created, following the below steps.<\/p>\n<h3>3.1 Import Reactive forms module<\/h3>\n<p>To start working with angular routing will need to import the <code>RoutingModule<\/code> module in <code>src\/app\/app.module.ts<\/code> file.<\/p>\n<p><span style=\"text-decoration: underline\"><em>app.module.ts<\/em><\/span><\/p>\n<pre class=\"brush:js; wrap-lines:false;\">\/\/ Injecting the routing module.\nimport { RoutingModule } from '.\/routing\/routing.module';\n\n\/\/ Declaring the routing module in the imports section of NgModule decorator.\nimports: [\n    BrowserModule, RoutingModule\n  ],\n<\/pre>\n<h3>3.2 Injecting Router Outlet in the Application module<\/h3>\n<p>To activate routing in the angular application, inject the routing outlet in <code>src\/app\/app.component.html<\/code> file.<\/p>\n<p><span style=\"text-decoration: underline\"><em>app.component.html<\/em><\/span><\/p>\n<pre class=\"brush:html; wrap-lines:false;\">&lt;div class=\"container\"&gt;\n  &lt;h2 align=\"center\" class=\"text-info\"&gt;{{ title }}&lt;\/h2&gt;\n  &lt;hr \/&gt;\n\n  &lt;!-- To activate the routing in the angular application. --&gt;\n  &lt;router-outlet&gt;&lt;\/router-outlet&gt;\n&lt;\/div&gt;\n<\/pre>\n<h3>3.3 Creating Components<\/h3>\n<p>To understand <em>child routing<\/em> in angular we will create some components. Execute the following commands in the npm console.<\/p>\n<pre class=\"brush:html; wrap-lines:false;\">\/\/ Administrator component.\nng generate component component\/admin\n\n\/\/ Child components of Administrator module.\nng generate component component\/admin-activity\nng generate component component\/admin-list\n\n\/\/ User component.\nng generate component component\/user\n<\/pre>\n<p>Following commands will generate the sample components to better understand the child routing in angular. If developers have any confusion regarding the project structure, they can refer to Fig. 1. Do <em>remember<\/em> to include the <em>router-outlet<\/em> in the <code>src\/app\/component\/admin\/admin.component.html<\/code> file to include the children components of the administrator component.<\/p>\n<h3>3.4 Creating a Routing module<\/h3>\n<p>Run the <code>ng g m routing<\/code> command in the npm console to create a <em>routing<\/em> module. Add the following code to the <code>src\/app\/routing\/routing.module.ts<\/code> file.<\/p>\n<p><span style=\"text-decoration: underline\"><em>routing.module.ts<\/em><\/span><\/p>\n<pre class=\"brush:js; wrap-lines:false;\">import { NgModule } from '@angular\/core';\nimport { Routes, RouterModule } from '@angular\/router';\n\n\/\/ Administrator component.\nimport { AdminComponent } from '..\/component\/admin\/admin.component';\n\/\/ Child components of Administrator module.\nimport { AdminListComponent } from '..\/component\/admin-list\/admin-list.component';\nimport { AdminActivityComponent } from '..\/component\/admin-activity\/admin-activity.component';\n\/\/ User component.\nimport { UserComponent } from '..\/component\/user\/user.component';\n\n\/\/ Configuring the routing paths.\nconst routes: Routes = [\n  { path: '', redirectTo: '\/user', pathMatch: 'full' },\n  { path: 'user', component: UserComponent },\n  {\n    path: 'admin', component: AdminComponent, children: [\n      { path: 'list', component: AdminListComponent },\n      { path: 'activity', component: AdminActivityComponent }\n    ]\n  }\n];\n\n@NgModule({\n  imports: [RouterModule.forRoot(routes)],\n  exports: [RouterModule],\n  declarations: []\n})\n\nexport class RoutingModule { }\n<\/pre>\n<h2>4. Run the Application<\/h2>\n<p>As we are ready with all the changes, let us compile and run the angular application with <code>ng serve<\/code> command. Once the projects are successfully compiled and deployed, open the browser to test it.<\/p>\n<h2>5. Project Demo<\/h2>\n<p>Open your favorite browser and hit the angular application url (<code>http:\/\/localhost:4200\/<\/code>) to display the index page of the application.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"818\" height=\"108\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/04\/angular-routing-childroutes-project-demo-guide-img-1.jpg\" alt=\"Angular Child Routes - User Interface\" class=\"wp-image-90492\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/04\/angular-routing-childroutes-project-demo-guide-img-1.jpg 818w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/04\/angular-routing-childroutes-project-demo-guide-img-1-300x40.jpg 300w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/04\/angular-routing-childroutes-project-demo-guide-img-1-768x101.jpg 768w\" sizes=\"(max-width: 818px) 100vw, 818px\" \/><figcaption>Fig. 2: User Interface<\/figcaption><\/figure>\n<\/div>\n<p>Change the browser url to <code>http:\/\/localhost:4200\/admin<\/code> to display the administrator interface.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"818\" height=\"171\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/04\/angular-routing-childroutes-project-demo-guide-img-2.jpg\" alt=\"Angular Child Routes - Administrator Interface\" class=\"wp-image-90493\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/04\/angular-routing-childroutes-project-demo-guide-img-2.jpg 818w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/04\/angular-routing-childroutes-project-demo-guide-img-2-300x63.jpg 300w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/04\/angular-routing-childroutes-project-demo-guide-img-2-768x161.jpg 768w\" sizes=\"(max-width: 818px) 100vw, 818px\" \/><figcaption>Fig. 3: Administrator Interface<\/figcaption><\/figure>\n<\/div>\n<p>Developers can click the link present in the admin interface to display the child components within the administrator interface.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"818\" height=\"229\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/04\/angular-routing-childroutes-project-demo-guide-img-3.jpg\" alt=\"Angular Child Routes - Child components\" class=\"wp-image-90494\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/04\/angular-routing-childroutes-project-demo-guide-img-3.jpg 818w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/04\/angular-routing-childroutes-project-demo-guide-img-3-300x84.jpg 300w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/04\/angular-routing-childroutes-project-demo-guide-img-3-768x215.jpg 768w\" sizes=\"(max-width: 818px) 100vw, 818px\" \/><figcaption>Fig. 4: Child components of Administrator Interface<\/figcaption><\/figure>\n<\/div>\n<p>That is all for this tutorial and I hope the article served you whatever you were expecting for. Happy Learning and do not forget to share!<\/p>\n<h2>6. Conclusion<\/h2>\n<p>In this section, we learned how to create a simple angular routing application and understand the child routing in angular. Developers can download the sample application as an Eclipse project in the <a href=\"#projectDownload\">Downloads<\/a> section.<\/p>\n<h2><a name=\"projectDownload\"><\/a>7. Download the Eclipse Project<\/h2>\n<p>This was a tutorial of Child Routing in the angular framework.<\/p>\n<div class=\"download\"><strong>Download<\/strong><br \/>You can download the full source code of this example here: <a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/04\/angular-reactive-form-custom-validations-assignment.zip\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Angular Child Routes Example<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Welcome readers, in this tutorial, we will learn the basic concept behind Routing and Child Routes in angular. 1. Introduction Routing in angular is an essential part of the angular framework contained in the @angular\/router package. It, Helps developers build single page applications with multiple states and views using routes and components Allows client-side navigation &hellip;<\/p>\n","protected":false},"author":26931,"featured_media":49726,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1880],"tags":[740],"class_list":["post-90490","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","tag-angular"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Angular Child Routes Example - Java Code Geeks<\/title>\n<meta name=\"description\" content=\"Interested to learn more about Angular? Then check out our detailed example on Angular Child Routes!\" \/>\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.javacodegeeks.com\/2019\/04\/angular-child-routes-example.html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular Child Routes Example - Java Code Geeks\" \/>\n<meta property=\"og:description\" content=\"Interested to learn more about Angular? Then check out our detailed example on Angular Child Routes!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.javacodegeeks.com\/2019\/04\/angular-child-routes-example.html\" \/>\n<meta property=\"og:site_name\" content=\"Java Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/javacodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-10T04:00:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/12\/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=\"Yatin Batra\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@javacodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@javacodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Yatin Batra\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/04\\\/angular-child-routes-example.html#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/04\\\/angular-child-routes-example.html\"},\"author\":{\"name\":\"Yatin Batra\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/person\\\/cda31a4c1965373fed40c8907dc09b8d\"},\"headline\":\"Angular Child Routes Example\",\"datePublished\":\"2019-04-10T04:00:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/04\\\/angular-child-routes-example.html\"},\"wordCount\":720,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/04\\\/angular-child-routes-example.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/angularjs-logo.jpg\",\"keywords\":[\"Angular\"],\"articleSection\":[\"Angular\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/04\\\/angular-child-routes-example.html#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/04\\\/angular-child-routes-example.html\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/04\\\/angular-child-routes-example.html\",\"name\":\"Angular Child Routes Example - Java Code Geeks\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/04\\\/angular-child-routes-example.html#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/04\\\/angular-child-routes-example.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/angularjs-logo.jpg\",\"datePublished\":\"2019-04-10T04:00:17+00:00\",\"description\":\"Interested to learn more about Angular? Then check out our detailed example on Angular Child Routes!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/04\\\/angular-child-routes-example.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/04\\\/angular-child-routes-example.html\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/04\\\/angular-child-routes-example.html#primaryimage\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/angularjs-logo.jpg\",\"contentUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/angularjs-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/04\\\/angular-child-routes-example.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Development\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/web-development\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/web-development\\\/javascript\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Angular\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/web-development\\\/javascript\\\/angular\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Angular Child Routes Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#website\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\",\"name\":\"Java Code Geeks\",\"description\":\"Java Developers Resource Center\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\"},\"alternateName\":\"JCG\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.javacodegeeks.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/exelixis-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/javacodegeeks\",\"https:\\\/\\\/x.com\\\/javacodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/person\\\/cda31a4c1965373fed40c8907dc09b8d\",\"name\":\"Yatin Batra\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/Yatin.batra_.jpg\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/Yatin.batra_.jpg\",\"contentUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/Yatin.batra_.jpg\",\"caption\":\"Yatin Batra\"},\"description\":\"An experience full-stack engineer well versed with Core Java, Spring\\\/Springboot, MVC, Security, AOP, Frontend (Angular &amp; React), and cloud technologies (such as AWS, GCP, Jenkins, Docker, K8).\",\"sameAs\":[\"https:\\\/\\\/www.javacodegeeks.com\"],\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/author\\\/yatin-batra\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular Child Routes Example - Java Code Geeks","description":"Interested to learn more about Angular? Then check out our detailed example on Angular Child Routes!","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.javacodegeeks.com\/2019\/04\/angular-child-routes-example.html","og_locale":"en_US","og_type":"article","og_title":"Angular Child Routes Example - Java Code Geeks","og_description":"Interested to learn more about Angular? Then check out our detailed example on Angular Child Routes!","og_url":"https:\/\/www.javacodegeeks.com\/2019\/04\/angular-child-routes-example.html","og_site_name":"Java Code Geeks","article_publisher":"https:\/\/www.facebook.com\/javacodegeeks","article_published_time":"2019-04-10T04:00:17+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/12\/angularjs-logo.jpg","type":"image\/jpeg"}],"author":"Yatin Batra","twitter_card":"summary_large_image","twitter_creator":"@javacodegeeks","twitter_site":"@javacodegeeks","twitter_misc":{"Written by":"Yatin Batra","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.javacodegeeks.com\/2019\/04\/angular-child-routes-example.html#article","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/2019\/04\/angular-child-routes-example.html"},"author":{"name":"Yatin Batra","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/person\/cda31a4c1965373fed40c8907dc09b8d"},"headline":"Angular Child Routes Example","datePublished":"2019-04-10T04:00:17+00:00","mainEntityOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/2019\/04\/angular-child-routes-example.html"},"wordCount":720,"commentCount":0,"publisher":{"@id":"https:\/\/www.javacodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/2019\/04\/angular-child-routes-example.html#primaryimage"},"thumbnailUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/12\/angularjs-logo.jpg","keywords":["Angular"],"articleSection":["Angular"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.javacodegeeks.com\/2019\/04\/angular-child-routes-example.html#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.javacodegeeks.com\/2019\/04\/angular-child-routes-example.html","url":"https:\/\/www.javacodegeeks.com\/2019\/04\/angular-child-routes-example.html","name":"Angular Child Routes Example - Java Code Geeks","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/2019\/04\/angular-child-routes-example.html#primaryimage"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/2019\/04\/angular-child-routes-example.html#primaryimage"},"thumbnailUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/12\/angularjs-logo.jpg","datePublished":"2019-04-10T04:00:17+00:00","description":"Interested to learn more about Angular? Then check out our detailed example on Angular Child Routes!","breadcrumb":{"@id":"https:\/\/www.javacodegeeks.com\/2019\/04\/angular-child-routes-example.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.javacodegeeks.com\/2019\/04\/angular-child-routes-example.html"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/2019\/04\/angular-child-routes-example.html#primaryimage","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/12\/angularjs-logo.jpg","contentUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/12\/angularjs-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.javacodegeeks.com\/2019\/04\/angular-child-routes-example.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.javacodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"Web Development","item":"https:\/\/www.javacodegeeks.com\/category\/web-development"},{"@type":"ListItem","position":3,"name":"JavaScript","item":"https:\/\/www.javacodegeeks.com\/category\/web-development\/javascript"},{"@type":"ListItem","position":4,"name":"Angular","item":"https:\/\/www.javacodegeeks.com\/category\/web-development\/javascript\/angular"},{"@type":"ListItem","position":5,"name":"Angular Child Routes Example"}]},{"@type":"WebSite","@id":"https:\/\/www.javacodegeeks.com\/#website","url":"https:\/\/www.javacodegeeks.com\/","name":"Java Code Geeks","description":"Java Developers Resource Center","publisher":{"@id":"https:\/\/www.javacodegeeks.com\/#organization"},"alternateName":"JCG","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.javacodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.javacodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.javacodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/javacodegeeks","https:\/\/x.com\/javacodegeeks"]},{"@type":"Person","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/person\/cda31a4c1965373fed40c8907dc09b8d","name":"Yatin Batra","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/12\/Yatin.batra_.jpg","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/12\/Yatin.batra_.jpg","contentUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/12\/Yatin.batra_.jpg","caption":"Yatin Batra"},"description":"An experience full-stack engineer well versed with Core Java, Spring\/Springboot, MVC, Security, AOP, Frontend (Angular &amp; React), and cloud technologies (such as AWS, GCP, Jenkins, Docker, K8).","sameAs":["https:\/\/www.javacodegeeks.com"],"url":"https:\/\/www.javacodegeeks.com\/author\/yatin-batra"}]}},"_links":{"self":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/90490","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/users\/26931"}],"replies":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/comments?post=90490"}],"version-history":[{"count":0,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/90490\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/media\/49726"}],"wp:attachment":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/media?parent=90490"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/categories?post=90490"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/tags?post=90490"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}