Different layout/route for mobile device and desktop in Angular

Question

I have a lazy module which I want a different experience for desktop and mobile device. Basically I want my desktop layout like:

Component1 display a list, user chooses an item on the list and component2 will display the details. I created router-outlet named 'side' to display as a sidebar. Here's is the router config:

const desktop_routes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    children: [
      {
        path: '',
        component: ListComponent,
        outlet: 'side'
      },
      {
        path: '',
        redirectTo: 'detail',
        pathMatch: 'full'
      },
      {
        path: 'detail',
        component: DetailComponent,
      }
    ]
  }

In mobile layout, I want Component1 as the content of path: '', user choose any time from the list will be lead to detail page (2 separate page):

How can I do it?

Answer 1

Use the same child components but create 2 route lists: /desktop/component2 and /mobile/component2. Then in desktop parent show component3a containing the desktop layout. In mobile layout set the routes up so that component3a has a single outlet and loads the pages all into a single router-outlet, if that makes sense?