{"id":23913,"date":"2019-02-13T16:15:23","date_gmt":"2019-02-13T14:15:23","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=23913"},"modified":"2019-02-13T13:34:33","modified_gmt":"2019-02-13T11:34:33","slug":"angular-6-routing-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-6-routing-example\/","title":{"rendered":"Angular 6 Routing Example"},"content":{"rendered":"<p>Welcome readers, in this tutorial, we will learn the basic concepts behind <strong>routing<\/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<p>[ulp id=&#8217;LXJcMJZXSsqGXYW8&#8242;]<\/p>\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\">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<h4>1.1.1 Route Parameters<\/h4>\n<p>In angular, dynamic routes are used in a web application to pass the data or application state between different components and pages. Developers define a route parameter using the colon syntax followed by the parameter name. For instance,<\/p>\n<pre class=\"brush:html; wrap-lines:false;\">{ path: 'product\/:product_id', component: ProductdetailComponent }\n<\/pre>\n<p>To access the route parameters, developers either use the <a href=\"https:\/\/angular.io\/api\/router\/ActivatedRoute\" target=\"_blank\" rel=\"noopener\">ActivatedRoute<\/a> service or the <a href=\"https:\/\/angular.io\/api\/router\/ParamMap\" target=\"_blank\" rel=\"noopener\">ParamMap<\/a> observables starting Angular 4.<\/p>\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<h4>1.2.1 Navigation Directives in Angular Routing<\/h4>\n<p>Angular Router provides the <code>routerLink<\/code> directive to create links. This replaces the <code>href<\/code> attribute in the anchor tag. It also provides the <code>routerLinkActive<\/code> for marking a link as <em>active<\/em>. For instance,<\/p>\n<pre class=\"brush:html; wrap-lines:false;\">&lt;a [routerLink]='\/product'&gt;Products&lt;\/a&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 6 Routing 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.<\/p>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" width=\"379\" height=\"607\" src=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2019\/02\/angular-routing-example-project-structure-img-1.jpg\" alt=\"Angular 6 Routing - Routing Application Structure\" class=\"wp-image-23914\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2019\/02\/angular-routing-example-project-structure-img-1.jpg.webp 379w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2019\/02\/angular-routing-example-project-structure-img-1-187x300.jpg.webp 187w\" sizes=\"(max-width: 379px) 100vw, 379px\" \/><figcaption>Fig. 1: Angular Routing Application Structure<\/figcaption><\/figure><\/div>\n\n\n<h2>3. Creating Angular application<\/h2>\n<p>Run the <code>ng new angular-routing-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 Creating Product Model<\/h3>\n<p>Run the <code>ng g m mymodel\/product<\/code> command in the npm console to create a product module having two member variables. Add the following code to the <code>product.module.ts<\/code> file.<\/p>\n<p><span style=\"text-decoration: underline\"><em>product.module.ts<\/em><\/span><\/p>\n<pre class=\"brush:js; wrap-lines:false;\">import { NgModule } from '@angular\/core';\nimport { CommonModule } from '@angular\/common';\n\n@NgModule({\n  imports: [\n    CommonModule\n  ],\n  declarations: []\n})\n\nexport class ProductModule {\n\n  productid: Number;\n  productname: String;\n\n  constructor(id: number, name: string) {\n    this.productid = id;\n    this.productname = name;\n  }\n}\n<\/pre>\n<h3>3.2 Creating Product Components<\/h3>\n<p>Follow the below steps to create the two different product components.<\/p>\n<h4>3.2.1 Product List Component<\/h4>\n<p>Run the <code>ng g c mycomponents\/productlist<\/code> command in the npm console to create the product list component. Add the following code to the <code>productlist.component.ts<\/code> file.<\/p>\n<p><span style=\"text-decoration: underline\"><em>productlist.component.ts<\/em><\/span><\/p>\n<pre class=\"brush:js; wrap-lines:false;\">import { Component, OnInit } from '@angular\/core';\nimport { Router } from '@angular\/router';\n\n\/\/ Importing the product model service\nimport { ProductModule } from '..\/..\/mymodel\/product\/product.module';\n\n@Component({\n  selector: 'app-productlist',\n  templateUrl: '.\/productlist.component.html',\n  styleUrls: ['.\/productlist.component.css']\n})\n\nexport class ProductlistComponent implements OnInit {\n\n  public productsarray: ProductModule[];\n\n  constructor(private _router: Router) {\n    console.log('Product list component is initialized.');\n  }\n\n  \/\/ Initializing the products array at the component startup\n  ngOnInit() {\n    this.productsarray = [\n      new ProductModule(1, 'Apple iPhone'),\n      new ProductModule(2, 'Google Home Mini'),\n      new ProductModule(3, 'Sony Walkman'),\n      new ProductModule(4, 'Samsung Galaxy'),\n      new ProductModule(5, 'Sony Playstation Portable'),\n      new ProductModule(6, 'LG 4K HDR Television'),\n      new ProductModule(7, 'Google Pixel 3 XL'),\n      new ProductModule(8, 'Amazon Alexa')\n    ];\n  }\n\n  \/\/ Method to get the selected product id to display details on the \"product-detail\" component\n  getproductdetails(product: ProductModule) {\n    this._router.navigate(['\/product', product.productid]);\n  }\n}\n<\/pre>\n<p>Add the following code to the <code>productlist.component.html<\/code> template file to display the product list to the user.<\/p>\n<p><span style=\"text-decoration: underline\"><em>productlist.component.html<\/em><\/span><\/p>\n<pre class=\"brush:html; wrap-lines:false;\">&lt;div class=\"container\"&gt;\n  &lt;h3 class=\"text-danger\"&gt;Product List&lt;\/h3&gt;\n  &lt;small class=\"text-muted\"&gt;This component displays the product list.&lt;\/small&gt;\n  &lt;div&gt;&nbsp;&lt;\/div&gt;\n\n  &lt;table class=\"table table-bordered\"&gt;\n    &lt;thead&gt;\n      &lt;tr class=\"text-center\"&gt;\n        &lt;th scope=\"col\"&gt;Product Id&lt;\/th&gt;\n        &lt;th scope=\"col\"&gt;Product Name&lt;\/th&gt;\n      &lt;\/tr&gt;\n    &lt;\/thead&gt;\n    &lt;tbody&gt;\n      &lt;tr class=\"text-center\" *ngFor=\"let product of productsarray\"&gt;\n        &lt;td&gt;&lt;a style=\"text-decoration: none; cursor: pointer; color: blue;\"\n            (click)=\"getproductdetails(product);\"&gt;{{product.productid}}&lt;\/a&gt;&lt;\/td&gt;\n        &lt;td&gt;{{product.productname}}&lt;\/td&gt;\n      &lt;\/tr&gt;\n    &lt;\/tbody&gt;\n  &lt;\/table&gt;\n&lt;\/div&gt;\n<\/pre>\n<h4>3.2.2 Product Details Component<\/h4>\n<p>Run the <code>ng g c mycomponents\/productdetail<\/code> command in the npm console to create the product list component. Add the following code to the <code>productdetail.component.ts<\/code> file.<\/p>\n<p><span style=\"text-decoration: underline\"><em>productdetail.component.ts<\/em><\/span><\/p>\n<pre class=\"brush:js; wrap-lines:false;\">import { Component, OnInit } from '@angular\/core';\nimport { ActivatedRoute } from '@angular\/router';\n\n@Component({\n  selector: 'app-productdetail',\n  templateUrl: '.\/productdetail.component.html',\n  styleUrls: ['.\/productdetail.component.css']\n})\n\nexport class ProductdetailComponent implements OnInit {\n\n  selected_productid: Number;\n\n  constructor(private _acroute: ActivatedRoute) {\n    console.log('Product detail component is initialized.');\n  }\n\n  ngOnInit() {\n    \/\/ Fetching the id and showing the selected product details on the \"product-detail\" component\n    this._acroute.params.subscribe(\n      param =&gt; this.selected_productid = param.product_id\n    );\n  }\n}\n<\/pre>\n<p>Add the following code to the <code>productdetail.component.html<\/code> template file to display the selected product details to the user.<\/p>\n<p><span style=\"text-decoration: underline\"><em>productdetail.component.html<\/em><\/span><\/p>\n<pre class=\"brush:html; wrap-lines:false;\">&lt;div class=\"container\"&gt;\n    &lt;h3 class=\"text-danger\"&gt;Product Detail&lt;\/h3&gt;\n    &lt;small class=\"text-muted\"&gt;This component displays the details of the selected product.&lt;\/small&gt;\n    &lt;div&gt;&nbsp;&lt;\/div&gt;\n\n    &lt;div id=\"productdetail\"&gt;\n        &lt;h5&gt;Selected product is= &lt;span class=\"text-success\"&gt;{{selected_productid}}&lt;\/span&gt;&lt;\/h5&gt;\n    &lt;\/div&gt;\n    &lt;div&gt;&nbsp;&lt;\/div&gt;\n\n    &lt;div style=\"text-align: right;\"&gt;\n        &lt;a routerLink=\"\/products\" class=\"text-muted\" style=\"text-decoration: none;\"&gt;Go To\n            Products List&lt;\/a&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n<\/pre>\n<h3>3.3 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>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\/\/ My product-list and product-detail components\nimport { ProductlistComponent } from '..\/mycomponents\/productlist\/productlist.component';\nimport { ProductdetailComponent } from '..\/mycomponents\/productdetail\/productdetail.component';\n\n\/\/ Configuring the routing paths\nconst routes: Routes = [\n  { path: '', redirectTo: '\/products', pathMatch: 'full' },\n  { path: 'products', component: ProductlistComponent },\n  { path: 'product\/:product_id', component: ProductdetailComponent }\n];\n\n@NgModule({\n  imports: [RouterModule.forRoot(routes)],\n  exports: [RouterModule]\n})\n\nexport class RoutingModule { }\n<\/pre>\n<h3>3.4 Add Data to the Application Module<\/h3>\n<p>Add the following code to the default module of the angular application<\/p>\n<h4>3.4.1 Application Module<\/h4>\n<p>Add the following code to the <code>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;\">import { BrowserModule } from '@angular\/platform-browser';\nimport { NgModule } from '@angular\/core';\n\nimport { AppComponent } from '.\/app.component';\n\n\/\/ My application components\nimport { ProductlistComponent } from '.\/mycomponents\/productlist\/productlist.component';\nimport { ProductdetailComponent } from '.\/mycomponents\/productdetail\/productdetail.component';\n\n\/\/ Injecting the routing module\nimport { RoutingModule } from '.\/routing\/routing.module';\n\n@NgModule({\n  declarations: [\n    AppComponent,\n    ProductlistComponent,\n    ProductdetailComponent\n  ],\n  imports: [\n    BrowserModule,\n    RoutingModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n<\/pre>\n<h4>3.4.2 Application Template<\/h4>\n<p>Add the following code to the <code>app.component.html<\/code> template 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;Welcome to Angular Routing example!&lt;\/h2&gt;\n  &lt;hr \/&gt;\n\n  &lt;!-- To activate the routing the angular application --&gt;\n  &lt;router-outlet&gt;&lt;\/router-outlet&gt;\n&lt;\/div&gt;\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 \u2013o<\/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\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" width=\"818\" height=\"440\" src=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2019\/02\/angular-routing-project-demo-img-1.jpg\" alt=\"Angular 6 Routing - Product List Page\" class=\"wp-image-23915\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2019\/02\/angular-routing-project-demo-img-1.jpg.webp 818w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2019\/02\/angular-routing-project-demo-img-1-300x160.jpg.webp 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2019\/02\/angular-routing-project-demo-img-1-768x413.jpg.webp 768w\" sizes=\"(max-width: 818px) 100vw, 818px\" \/><figcaption>Fig. 2: Product List Page<\/figcaption><\/figure><\/div>\n\n\n<p>Click on the product id to navigate to a &#8220;product-detail&#8221; component and display the selected product details to the user.<\/p>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" width=\"818\" height=\"176\" src=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2019\/02\/angular-routing-project-demo-img-2.jpg\" alt=\"Angular 6 Routing - Product Details Page\" class=\"wp-image-23916\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2019\/02\/angular-routing-project-demo-img-2.jpg.webp 818w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2019\/02\/angular-routing-project-demo-img-2-300x65.jpg.webp 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2019\/02\/angular-routing-project-demo-img-2-768x165.jpg.webp 768w\" sizes=\"(max-width: 818px) 100vw, 818px\" \/><figcaption>Fig. 3: Product Details Page<\/figcaption><\/figure><\/div>\n\n\n<p>That is all for this tutorial and I hope the article served you whatever you were looking for. Happy Learning and do not forget to share!<\/p>\n<h2>6. Angular 6 Routing &#8211; Conclusion<\/h2>\n<p>In this section, developers learned how to create an <strong>Angular Routing<\/strong> example. 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 Routing in an angular application.<\/p>\n<div class=\"download\"><strong>Download<\/strong><br \/>You can download the full source code of this example here:\u00a0<a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2019\/02\/angular-routing-example.zip\" target=\"_blank\" rel=\"noopener\"><strong>Angular 6 Routing Example<\/strong><\/a><\/div>","protected":false},"excerpt":{"rendered":"<p>Welcome readers, in this tutorial, we will learn the basic concepts behind routing 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 and routing between &hellip;<\/p>\n","protected":false},"author":2162,"featured_media":909,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25],"tags":[48],"class_list":["post-23913","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-js","tag-angular"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Angular 6 Routing Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"Interested to learn more about Angular? Then check out our detailed example on Angular 6 Routing! Download our FREE AngularJS Programming Cookbook!\" \/>\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-6-routing-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular 6 Routing Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"Interested to learn more about Angular? Then check out our detailed example on Angular 6 Routing! Download our FREE AngularJS Programming Cookbook!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-6-routing-example\/\" \/>\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=\"2019-02-13T14:15:23+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=\"Yatin\" \/>\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=\"Yatin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 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-6-routing-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-6-routing-example\/\"},\"author\":{\"name\":\"Yatin\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/6c946b8aea919fb2cd83fb17268e9367\"},\"headline\":\"Angular 6 Routing Example\",\"datePublished\":\"2019-02-13T14:15:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-6-routing-example\/\"},\"wordCount\":855,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-6-routing-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"keywords\":[\"angular\"],\"articleSection\":[\"Angular.js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-6-routing-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-6-routing-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-6-routing-example\/\",\"name\":\"Angular 6 Routing Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-6-routing-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-6-routing-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"datePublished\":\"2019-02-13T14:15:23+00:00\",\"description\":\"Interested to learn more about Angular? Then check out our detailed example on Angular 6 Routing! Download our FREE AngularJS Programming Cookbook!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-6-routing-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-6-routing-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-6-routing-example\/#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-6-routing-example\/#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 6 Routing Example\"}]},{\"@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\/6c946b8aea919fb2cd83fb17268e9367\",\"name\":\"Yatin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3f011dd665043468ba193f7b07472ebbedfa359cff5e576a91a5901c130ca6f1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3f011dd665043468ba193f7b07472ebbedfa359cff5e576a91a5901c130ca6f1?s=96&d=mm&r=g\",\"caption\":\"Yatin\"},\"description\":\"The author is graduated in Electronics &amp; Telecommunication. During his studies, he has been involved with a significant number of projects ranging from programming and software engineering to telecommunications analysis. He works as a technical lead in the information technology sector where he is primarily involved with projects based on Java\/J2EE technologies platform and novel UI technologies.\",\"sameAs\":[\"https:\/\/www.webcodegeeks.com\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/yatin-batra\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular 6 Routing Example - Web Code Geeks - 2026","description":"Interested to learn more about Angular? Then check out our detailed example on Angular 6 Routing! Download our FREE AngularJS Programming Cookbook!","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-6-routing-example\/","og_locale":"en_US","og_type":"article","og_title":"Angular 6 Routing Example - Web Code Geeks - 2026","og_description":"Interested to learn more about Angular? Then check out our detailed example on Angular 6 Routing! Download our FREE AngularJS Programming Cookbook!","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-6-routing-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2019-02-13T14:15:23+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":"Yatin","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Yatin","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-6-routing-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-6-routing-example\/"},"author":{"name":"Yatin","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/6c946b8aea919fb2cd83fb17268e9367"},"headline":"Angular 6 Routing Example","datePublished":"2019-02-13T14:15:23+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-6-routing-example\/"},"wordCount":855,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-6-routing-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","keywords":["angular"],"articleSection":["Angular.js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-6-routing-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-6-routing-example\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-6-routing-example\/","name":"Angular 6 Routing Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-6-routing-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-6-routing-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","datePublished":"2019-02-13T14:15:23+00:00","description":"Interested to learn more about Angular? Then check out our detailed example on Angular 6 Routing! Download our FREE AngularJS Programming Cookbook!","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-6-routing-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-6-routing-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-6-routing-example\/#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-6-routing-example\/#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 6 Routing Example"}]},{"@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\/6c946b8aea919fb2cd83fb17268e9367","name":"Yatin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3f011dd665043468ba193f7b07472ebbedfa359cff5e576a91a5901c130ca6f1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3f011dd665043468ba193f7b07472ebbedfa359cff5e576a91a5901c130ca6f1?s=96&d=mm&r=g","caption":"Yatin"},"description":"The author is graduated in Electronics &amp; Telecommunication. During his studies, he has been involved with a significant number of projects ranging from programming and software engineering to telecommunications analysis. He works as a technical lead in the information technology sector where he is primarily involved with projects based on Java\/J2EE technologies platform and novel UI technologies.","sameAs":["https:\/\/www.webcodegeeks.com"],"url":"https:\/\/www.webcodegeeks.com\/author\/yatin-batra\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/23913","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\/2162"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=23913"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/23913\/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=23913"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=23913"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=23913"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}