Parent component not hides in Angular router

Question

I have an appComponent in which i display a toolbar, footer and the main content. This main content uses the router-outlet directive. It's something like this

<div class="h-100">
    <app-toolbar></app-toolbar>
    <app-breadcrumb></app-breadcrumb>
    <div class="container h-100">
      <router-outlet></router-outlet>
    </div>
</div>

in the toolbar I have a menu with some items. For example

<button [routerLink]="['/list']" routerLinkActiveOptions="{exact:true}">List</button>

When I click on the button I can show the content of that page (because of the router-outlet). I can now show a table with some content and it works fine. Now, I need to click on a row and show the detail of the row itself. To do that I'm just doing something like this

<a [routerLink]="['detail/',row.id]">{{value}}</a>

and in the same page of this table (I am using ngx-datatable) I have another <router-outlet></router-outlet>. In this way I can now show another component at the url ".../detail/0" for example. This is called DetailComponent. What's the problem? Everything works well expect for the parent component (the table) that still stays there. When I click a row, The table not disappears but stays there and just below it, the child component appears. This is my routes by the way

const routes: Routes = [
{
    path: 'list', 
    component: ListComponent, 
    canActivate : [AuthguardService], 
    children: [
      {
        path: 'detail/:id', component: DetailComponent, canActivate : [AuthguardService],
        data: {
          breadcrumb: ''
        }
      }
     ],
     data: {
      breadcrumb: 'List'
    } 
  },{
    path: '', redirectTo: '/home', pathMatch: 'full'
  },
  { path: '**', redirectTo: '' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { enableTracing: false })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

I tried also to remove <router-outlet></router-outlet> from the ListComponent but if I do that, the child component doesn't show

https://stackblitz.com/edit/angular-router-basic-example-n2uzis?file=app/views/details/detail.component.ts

score 1 · Accepted Answer · answered Oct 27 '20 at 15:42

1

This is the expected behavior with the current route setup.

In order to fix it, there should be a wrapper component instead of the ListComponent, and list component should also be a child of it like DetailComponent.

Components listed as children under a route do not make the parent component to disappear, parent will be the anchor and it's children will be rendered to where you place the router-outlet in the parent component.

answered Oct 27 '20 at 15:42

Berk Kurkcuoglu

1,453
1
9
11

1

And so, the parent component of ListComponent and DetailComponent could just contain the ? Or what? – Atlas91 Oct 27 '20 at 15:45
1

Yes exactly, or some simple layout to place them properly on screen. – Berk Kurkcuoglu Oct 27 '20 at 15:46
In I create a parent component with only I can't see anything – Atlas91 Oct 27 '20 at 16:25
If you can provide a stackblitz MRE, I can help you with the implementation. – Berk Kurkcuoglu Oct 27 '20 at 16:29
Ok I'm going to create a stackblitz in a moment – Atlas91 Oct 27 '20 at 16:35
So, that's exactly my problem https://stackblitz.com/edit/angular-router-basic-example-n2uzis?file=app/views/details/detail.component.ts – Atlas91 Oct 27 '20 at 16:51
Click on "list" and then the id. What I would is that the table disappear when I click the id. When I go back with the browser navigation the table should be visible again – Atlas91 Oct 27 '20 at 16:53
Here, I've implemented the above mentioned approach https://stackblitz.com/edit/angular-router-basic-example-xpfkpr? , I can answer if you have any questions. – Berk Kurkcuoglu Oct 27 '20 at 17:03
Basically, I've added a parent component wrapping your catalog list and details, and added route config to redirect to the list view by default, also updated some of the routerLinks to reflect the changes. – Berk Kurkcuoglu Oct 27 '20 at 17:05
Yeah it's working fine!! Thanks! Now I get it! Just one question, do you think it would be possibile to skip the "catalog" part of the url? I mean, something like "../list/" and then "../list/detail/1" using this kind of structure of course. – Atlas91 Oct 27 '20 at 17:20
It is possible but depends on the use case, if you leave the parent route blank like “” and adjust other things to be adjacent it should be fine. – Berk Kurkcuoglu Oct 27 '20 at 17:29

Parent component not hides in Angular router

1 Answers1