How can I display a specific child component inside a parent component with its own routing in Angular?

Question

I can easily display a child component inside a parent component, but how can I switch the displaying of a child based on a route?

Is it possible to create a routing mechanism like this without using *ngIf's to hide and show the child components?

I have a profile page, ex. ../members/edit

When you first route to the page I want to load up and display the child component

<app-profile-menu-items>

like this

<app-parent-component class="container">
  <div class="col-2">
    // general info 
  </div>
  <div class="col-10">
    // child component here
    // only want to show 1 child at a time based on some routing
    <app-profile-menu-items></app-profile-menu-items>
  </div>
</app-parent-component>

This child component <app-profile-menu-items>

has a list of options (links) in it to select from (/member/edit/info, /member/edit/images, etc), which when clicked should display that child component and hide

<app-profile-menu-items> // hidden when one below is shown

<app-profile-menu-info></app-profile-menu-info>
<app-profile-menu-images></app-profile-menu-images>
<app-profile-menu-location></app-profile-menu-location>

Additionally, how would the routing work ex. path: 'edit/info', what would I use for the component?

{ path: 'edit', component: MemberEditComponent, resolve: {user: MemberEditResolver}, canDeactivate: [PreventUnsavedChangesGuard]},

Answer 1

Your parent template should be something like this and it should have routerOutlet:

<app-parent-component class="container">
    <div class="col-2">
      // general info 
    </div>
    <div class="col-10">
      // child component here
      // only want to show 1 child at a time based on some routing
      <router-outlet></router-outlet>
    </div>
</app-parent-component>

and your routes in routing module:

const routes: Routes = [
{
    path: '',            //<---- parent component declared here
    component: ParentComponent,
    children: [                          
        {
            path:'child-1',
            component: Child1Component  // <-- Child component 
        },
        {
            path:'child-2',
            component: Child2Component  // <-- Child component 
        },
        {
            path:'child-3',
            component: Child3Component // <-- Child component 
        }
    ]
 }
];

Answer 2

You can set routes as follows.

const routes: Routes = [
    {
        path: 'parent-component',            //<---- parent component declared here
        component: ParentComponent,
        children: [                          
            {
                path:'profile-menu-items',
                component: ProfileMenuItemsComponent  // <-- Child component 
            },
            {
                path:'profile-menu-images',
                component: ProfileMenuImagesComponent  // <-- Child component 
            },
            {
                path:'profile-menu-location',
                component: ProfileMenuLocationComponent // <-- Child component 
            }
        ]
     }
  ];