How to hide the parent component when loading a child component in Angular 2

Question

In my current project, I have the following view

When the page loads, the Parent Item Description should visible and the Selected sub item description should not visible.

When I select a Sub Item x, the Parent Item Description should be hidden and only the Selected sub item description visible.

I have created the following route for this

{
        path: 'main/:id',
        component: MainComponent,
        children: [
          {
            path: '',
            component: MainComponent,
            pathMatch: 'full',
          },
          {
            path: 'sub/:id',
            component: SubComponent
          }
        ]
      },

But when run the project, it doesn't work the way that I was expecting.

I have added a <router-outlet></router-outlet> to load the sub item description, but when I go to the main item, the main item itself replicated inside that router-outlet.

In summary, I wish to load only selected item's description in the right side.

Answer 1

You need to convert the parent route to a componentless route like this:

 {
    path: 'main/:id',
    children: [
      {
        path: '',
        pathMatch: 'full'
        component: MainComponent,
      },
      {
        path: 'sub/:id',
        component: SubComponent
      }
    ]
  }