Dynamically Change Between Routed Components with Angular Router

Ionic Framework
1

We are working on extending our Ionic Mobile App with improved Desktop layouts. It isn’t always possible to achieve the different layouts using css alone. Similarly combining both desktop & mobile templates in a single template quickly becomes unwieldy and difficult to read and understand.

We have created sub components that are rendered based on the platform detection. ie:

page1.page.html

<ng-container *ngIf="platform.is('mobile')">
    <page-1-mobile-view></page-1-mobile-view>>
</ng-container>
<ng-container *ngIf="platform.is('mobile')">
    <page-1-desktop-view></page-1-desktop-view>>
</ng-container>

The problem with this approach is the <ion-content></ion-content> tag in the platform specific components isn’t rendered. Ionic places a #ion-page class to the routed component and only immediate ion-content children are shown. Others are hidden.

Is it possible to use Angular Router to route to different components based on the platform?

ie:

const routes = [
    {
        path: "page-1",
        component: Page1MobilePage,
        canActivate: IsMobileRouterGuard
    },
    {
        path: "page-1",
        component: Page1DesktopPage,
        canActivate: IsDesktopRouterGuard
    }
]

Or does anyone else have an other suggestion?

Thanks a million!

2

Hi, there are couple of articles explaining this topic.

Try this: https://medium.com/better-programming/creating-angular-webapp-for-multiple-views-and-screen-sizes-50fe8a83c433