A simple configurable app shell using Angular Material components, for quickly creating applications with dynamic routing. Demo.
Whilst creating Documentor (which required dynamic/configurable routes) it occurred to me that it may be useful to abstract out the underlying implementation/behaviour to use for other apps. So i did.
A replacement for more complex routing.
npm i @jamesbenrobb/dynamic-route-app@latest
{
"routes": [{
"path": "/",
"redirectTo": "one"
}, {
"path": "one",
"content": {
"someProp": "someValue"
}
}, {
"path": "two",
"label": "2",
"content": {
"someOtherProp": "someOtherValue"
},
"children": [{
"path": "two-first-child",
"content": {}
}]
}, {
"path": "three",
"content": {
"someOtherProp": "someOtherValue"
},
"children": [{
"path": "three-first-child",
"content": {}
}, {
"path": "three-second-child",
"content": {},
"children": [{
"path": "three-second-child-first-child",
"content": {}
}]
}]
}]
}
import {ApplicationConfig} from '@angular/core';
import {getJBRDRAAppProviders} from "@jamesbenrobb/dynamic-route-app";
export const appConfig: ApplicationConfig = {
providers: [
...getJBRDRAAppProviders(
'assets/route-config.json',
{appName: 'Demo App'}
)
]
};
@use "@jamesbenrobb/dynamic-route-app/styles/jbr-dra-styles" as dra;
@include dra.setJBRDRAVars();
- Provider options
- Add your own content component
- Add your own side menu
- Add your own header content
-
Declare your own light and dark themes
export type JBRDRAAppProviderOptions<T extends ContentNodeContentType> = {
appName?: string
getAllChildNodes?: getAllChildNodes<T>
contentComponentType?: string
sideMenuComponentType?: string
}
Create a component that implements ContentLoaderComponentIO
import {Component, Output} from "@angular/core";
import {ContentLoaderComponentIO} from "@jamesbenrobb/dynamic-routes-app";
@Component({
selector: 'my-content-component',
templateUrl: '...',
styleUrls: ['...'],
standalone: true
})
export class MyContentComponent implements ContentLoaderComponentIO<YourContentType> {
@Input() routeNodes?: RouteNode<YourContentType>[] | undefined
@Input() currentNode?: RouteNode<YourContentType> | undefined
@Input() currentContent?: YourContentType | undefined
@Output() routeSelected = new EventEmitter<RouteNode<>>(); // this is optional
}
Register the component with the ComponentLoaderMapService
(see details on registering components here) and add the provider to your app
import {Provider} from "@angular/core";
import {ComponentLoaderMapService} from "@jamesbenrobb/ui";
const provider: Provider = {
provide: ComponentLoaderMapService,
useValue: {
'my-content-component': {
import: () => import('./my-content.component'),
componentName: 'MyContentComponent'
}
},
multi: true
}
Supply the registered name of you content component to getJBRDRAAppProviders
import {ApplicationConfig} from '@angular/core';
import {getJBRDRAAppProviders} from "@jamesbenrobb/dynamic-route-app";
export const appConfig: ApplicationConfig = {
providers: [
...getJBRDRAAppProviders(
'assets/route-config.json',
{
appName: 'My app name',
contentComponentType: 'my-content-component'
}
)
]
};
By default a mildly modified version of mat-tree
is used.
If you wish to supply your own menu first create a menu component that implements SideMenuComponentIO
import {Component, Input, Output} from "@angular/core";
import {SideMenuComponentIO, MenuItemNode} from "@jamesbenrobb/dynamic-routes-app";
@Component({
selector: 'my-side-menu',
templateUrl: '...',
styleUrls: ['...'],
standalone: true
})
export class MySideMenuComponent implements SideMenuComponentIO {
@Input() menuNodes?: MenuItemNode[];
@Input() currentNodes?: MenuItemNode[];
@Output() nodeSelected = new EventEmitter<MenuItemNode>();
}
Register the component with the ComponentLoaderMapService
(see details on registering components here) and add the provider to your app
import {Provider} from "@angular/core";
import {ComponentLoaderMapService} from "@jamesbenrobb/ui";
const provider: Provider = {
provide: ComponentLoaderMapService,
useValue: {
'my-side-menu': {
import: () => import('./my-side-menu.component'),
componentName: 'MySideMenuComponent'
}
},
multi: true
}
Supply the registered name of you side menu component to getJBRDRAAppProviders
import {ApplicationConfig} from '@angular/core';
import {getJBRDRAAppProviders} from "@jamesbenrobb/dynamic-route-app";
export const appConfig: ApplicationConfig = {
providers: [
...getJBRDRAAppProviders(
'assets/route-config.json',
{
appName: 'My app name',
sideMenuComponentType: 'my-side-menu'
}
)
]
};
The header has a content slot that can be used to project bespoke content.
<jbr-dra-app-layout-container>
<div jbr-dra-toolbar-content>I'm the header text</div>
</jbr-dra-app-layout-container>
Approximately 90% of the app uses Angular Material components and the other 10% also support being themed.
To supply your own themes the setJBRDRAVars
mixin has the following optional arguments:
@use '@angular/material' as mat;
@use "@jamesbenrobb/dynamic-route-app/styles/jbr-dra-styles" as dra;
@include dra.setJBRDRAVars(
$light-theme, // an Angular material light theme created with mat.define-light-theme
$dark-theme, // an Angular material dark theme created with mat.define-dark-theme
$typography, // an Angular material typography config created with mat.define-typography-config
$side-menu-width // a custom width for the side menu - defaults to 320px
);
The app also comes with a light/dark mode switch that sets a data
attribute on body.
When explicitly selected, the switch also stores the users preference in Local storage, overriding the OS mode.
The following can be used to style your own components
<body [data-color-mode]="light">
...
</body>
or
<body [data-color-mode]="dark">
...
</body>