Angular 8 Implementing Children Component Routing in Parent Component routes

Below article shows to achieve loading child component into parent component using children attribute in routing and using <router-outlet> on Parent Component, So how it can be implemented that you can see below:

Parent URL: http://domainName/shops

Child URL 1: http://domainName/shops/add

Child URL 2: http://domainName/shops/update/1

From the above URLs, it is clear that we have a parent page called shops component and we have other two child  pages  called Add and Update. Update page also accepts one parameter which is Shop Id. So here we want to see how we can achieve this type of routing with Angular 6 or Angular 8  applications. There are multiple ways to achieve this, but here we have used simple approach by using "children" attribute in routing when defining routing for parent page. You can follow below steps to create this type of routing and load child pages into parent page.

Step 1: Add Component for shop from following command:

ng g c Shops

Step 2: Add Component for Add Shops using following command:

ng g c Shops/Add-Shop

Step 3: Add Component for Update Shops using following command:

ng g c Shops/Update-Shop

Step 4: Now, Open shops.component.ts page and add the following code:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-shops',
  templateUrl: './shops.component.html',
  styleUrls: ['./shops.component.css']
})
export class ShopsComponent implements OnInit {
  constructor(public router: ActivatedRoute) { }
  ngOnInit() {
  }
}

In the above shops component, we just have added public router:ActivatedRoute to the constructor and the import statement of ActivatedRoute at the top. Make sure the access modifier is set as public to the constructor otherwise it will throw following error when you are trying to make publish build for the project using "ng build --prod" command:

Error: Property 'router' is private and only accessible within class 'ShopsComponent'

Step 5: Now, Open shops.component.html page and add the following code to routing links on Shop page:

<div style="margin:20px;" *ngIf="router.children.length === 0">
    <div style="float:left;"><a routerLink="add">Add</a></div>
    <div style="float:left;margin-left:20px;"><a routerLink="update/1">Update</a></div>
</div>
<router-outlet></router-outlet>

You can see in the above template, we have used *ngIf statement and using this we are hiding the menu when we have visited any one of the links in this div. We have to use <router-outlet> in this parent component template to load the child component template in this area.

Step 6: Now, open update-shop.component.ts file and add following code to read parameters passed to Update Shop URL:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-update-shop',
  templateUrl: './update-shop.component.html',
  styleUrls: ['./update-shop.component.css']
})
export class UpdateShopComponent  implements OnInit {
  shopId: number;
  constructor(private router: ActivatedRoute) { }
  ngOnInit() {
    this.router.params.subscribe(params => {
      this.shopId = params.shopId;
  });
}
}

Step 7: Now, Open update-shop.component.html to read the Shop Id Parameter as shown below:

<div>Update Shop Page for ShopId: {{shopId}}</div>

Step 8: Now, add the routing configuration for parent page and all its child pages in app-routing.module.ts page as shown below:

const routes: Routes = [
  { path: 'shops', component: ShopsComponent,
    children:[
        { path: 'add', component: AddShopComponent, pathMatch:'full'},
        { path: 'update/:shopId', component: UpdateShopComponent, pathMatch:'full'}
    ]
  }
];

In the above routes code, we haven't added pathMatch to parent routes, we just have added to child routes. If you specify it to parent route, then routing will not work, it will give error as: 

Error: Cannot match any routes. URL Segment: 'shops/update/1'

Step 9: Now run the Angular project from following command and see the output:

ng serve -o

Like this approach, there is another approach without using children routes for a parent component and router-outlet on parent template page : http://www.techtutorhub.com/article/Angular-8-How-to-Add-or-configure-Child-Component-Routing-Configuration-to-append-to-Parent-Component-URL/58