Dynamic Route App

What.

A simple configurable app shell using Angular Material components, for quickly creating applications with dynamic routing. Demo.

Why.

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.

What not.

A replacement for more complex routing.

How.

1. Install
2. Define route config json
3. Add providers
4. Include styles
5. Extending for your own use

Install

npm i @jamesbenrobb/dynamic-route-app@latest

Define route config json

{
  "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": {}
      }]
    }]
  }]
}

Add providers

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'}
    )
  ]
};

Include styles

@use "@jamesbenrobb/dynamic-route-app/styles/jbr-dra-styles" as dra;

@include dra.setJBRDRAVars();

Extending for your own use.

1. Provider options
2. Add your own content component
3. Add your own side menu
4. Add your own header content
5. Declare your own light and dark themes

Provider options

export type JBRDRAAppProviderOptions<T extends ContentNodeContentType> = {
  appName?: string
  getAllChildNodes?: getAllChildNodes<T>
  contentComponentType?: string
  sideMenuComponentType?: string
}

Add your own content component

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'
      }
    )
  ]
};

Add your own side menu

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'
      }
    )
  ]
};

Add your own header content

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>

Declare your own light and dark themes

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>