Angular resolver that creates a navigation menu based on the module's routes

demos-menu.component.html

<nav>
    <ces-menu-toggle class="nav-buttons align-left" menuTitle="navigation" toggleIcon="ellipsis-vertical">
        <ces-button-route *ngFor="let button of buttons" [link]="button.path" [title]="button.title" [label]="button.label" [icon]="button.icon" [activeSelfOnly]="button.activeSelfOnly" class="nav-button">
        </ces-button-route>
    </ces-menu-toggle>
</nav>

demos-menu.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ButtonRoute } from 'projects/buttons/src/public-api';


@Component({
  selector: 'ces-demos-menu',
  templateUrl: './demos-menu.component.html',
  styleUrls: ['./demos-menu.component.scss']
})
export class DemosMenuComponent implements OnInit {

  buttons: ButtonRoute[] = [];

  constructor(
    private route: ActivatedRoute,

  ) {
  }

  ngOnInit(): void {
    this.buttons = this.route.snapshot.data.menu;
  }

}

demos-routing-module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MetaTagsResolverRouteDataService } from 'projects/meta-tags/src/public-api';
import { ResolveMenuService } from 'projects/menus/src/public-api';
import { DemosComponent } from './demos.component';
import { DemoSelectMenusComponent } from './demo-select-menus/demo-select-menus.component';



export const routes: Routes = [
  {
    path: '',
    component: DemosComponent,
    data: {
      title: 'Demos'
    },
    resolve: {
      displayTitle: MetaTagsResolverRouteDataService,
      menu: ResolveMenuService
    },
    children: [
      {
        path: 'select-menus',
        component: DemoSelectMenusComponent,
        data: {
          title: 'Select Menus',
          description: "Cloud engineering demo of customizable select menus",
          menu: {
            icon: 'dropdown',
            label: 'Select Menus',
            show: true,
            activeSelfOnly: true,
          },
        },
        resolve: {
          ActivatedRoute: MetaTagsResolverRouteDataService
        }
      },
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  providers: [
  ],
  exports: [RouterModule],
})
export class DemosRoutingModule { }

resolve-menu.service.ts

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { ResolveMenu } from './menus';
import { Observable } from 'rxjs';


@Injectable({
  providedIn: 'root'
})

export class ResolveMenuService implements Resolve<ResolveMenu[]> {  

  constructor(
  ) { }

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): ResolveMenu[] | Observable<ResolveMenu[]> {
    let menu: ResolveMenu[] = [];
    route.routeConfig.children.map(child => {
      if (child.data.menu)
      menu.push({
        path: child.path,
        show: child.data.menu.show,
        activeSelfOnly: child.data.menu.activeSelfOnly,
        title: child.data.title,
        label: child.data.menu.label,
        icon: child.data.menu.icon
      })
    })
    return menu;
  }

}