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?

Tobin · Accepted Answer · 2019-08-29 11:03:37Z

2

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?

answered Aug 29, 2019 at 11:03

Tobin

2,0572 gold badges19 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Eliseo · Accepted Answer · 2021-04-27 11:54:37Z

I suggest another approach. If you know when you're in a "mobile" or in a "desktop" (really you should check the "screen.size"). see, e.g. this SO

You can has some like

<ng-container *ngIf="{size:commonService.resize$|async} as size">
  <div #detail *ngIf="size.size?.width>500">
  <router-outlet></router-outlet>
  </div>
</ng-container>

In your component you try to "get" the div detail

@ViewChild('detail') detail:ElementRef<any>

know you can check if "detail" exist and navigate to one or another one direction

click(){
    if (this.detail)
       this.router.navigate('parent/child/1')
    else
       this.router.navigate('parent-child/1')

}

You router definition like

const routes: Routes = [
  { path: 'parent', component: ParentComponent,children:[
       {path:'child:id', component:ChildrenComponent
   ] },
  { path: 'parent-child:id', component: ChildrenComponent },
];

yet you can reach the child-component using parent-child/1 in the "main" router-outlet or using parent/child/1 (in the "main" router-outlet you has "parent" and in the router-outlet of "parent" you has the child)

Collectives™ on Stack Overflow

Different layout/route for mobile device and desktop in Angular

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related