Angular router: Displaying children horizontal (as siblings)

Question

I would like to achieve the following behaviour:

Routes:

• / ROOT
• /patients PANEL1 depth-1
• /patients/1 PANEL2 depth-2
• /patients/1/log PANEL3 depth-3

I would like to have following routing definition:

 const routes: Routes = [
  {
    path: 'patients',
    component: PatientsComponent,
    children: [
      {
        path: '',
        component: PatientsListComponent,
        children: [
          {
            path: ':id',
            component: PatientDetailsComponent,
            children: [
              {
                path: 'log',
                component: PatientLogComponent,
              }
            ]
          }
        ]
      }
    ]
  },
];

If I do that DOM structure is nested ... Is it possible to open children horizontally (sibling like)? Further on I would also like to enable animations so that if depth is more than 3 first panels width will collapse ...

Answer 1

yes, this is possible, i make same app as your

• Root Component (after auth or anything else)
• • Left menu
• • Route outlet
• • • PatientsComponent
• • • Route outlet
• • • • PatientsListComponent (route outlet or ngIf with url parameter in template)
• • • • Route outlet
• • • • • PatientDetailsComponent (route outlet or ngIf with url parameter in template)

and deeper and deeper

than u write router u use same components in depth

routing like your, but PatientList in my case not exist, i render in PatientComponent

RootComponent: <app-menu></app-menu> <router-outlet></router-outlet>

PatientComponent: <app-list></app-list> <router-outlet></router-outlet>

PatientDetailsComponent: <app-data>DETAIL DATA HERE</app-data> <router-outlet></router-outlet>

same deeper and deeper