src/app/app-routing.module.ts
file you may notice we also use an Empty Layout. This one works as a wrapper for routes that do not require navigation components (side menus, top nav bar) like Authentication pages.BreakpointObserver
utility for evaluating media queries and reacting to their changing.<mat-sidenav>
) modes depending on the current screen size.portals
that provides a flexible system for rendering dynamic content into an application. All the mechanism is handled by the DynamicLayoutComponent
.mobile-detect
node module to our server.ts
in order to classify the user-agent
header coming in the user REQUEST of the app and then add a custom mobile-device
header to the RESPONSE we send back to the user with the Angular app already rendered.DynamicLayoutComponent
checks the RESPONSE object sent in the server.ts
and depending on the device the user is requesting the app from, we render the mobile layout or a desktop layout.DynamicLayoutComponent
to dynamically render different layouts for our app. This component has a scoped functionality of knowing how to render different layouts.
By listening to a Subject that communicates when the screen size changes, this component can render different layouts accordingly.LayoutService
to enable dispatching layout switching events across the app and also store the current and previous layouts to ease the layout re-rendering mechanism. DynamicLayoutComponent
subscribes to the LayoutService
Subject
in order to react to screen size changes.LayoutService
is used in the SettingsMenuComponent
(which handles the live demo theme switching functionality) and in the root AppComponent
where we defined the conditional rendering using the Material CDK BreakpointObserver
.src/app/app-layouts.ts
file you will find a list with all the layouts available. There are settings to also, easily, change the default layout.