I encountered a similar issue.
Here is my approach to returning key-value pairs for navigation.
1. Key-Pairs
export type PagePath =
...
'/demos' |
'/demos/hr-browser-scroll' |
'/demos/grid/filter-management' |
'/';
2. Mapping Dictionary
export const pagePath2PageInfoDict: Record<PagePath, PageInfo> = {
...
'/demos': new PageInfo('demos'),
'/demos/hr-browser-scroll': new PageInfo('demos', 'horizontal browser scroll'),
'/demos/grid/filter-management': new PageInfo('demos', 'grids: filter management'),
'/': new PageInfo(),
};
3. Retrieve Key-Value Pairs
export function getPagePath2PageInfoPairs(predicate: (path: string) => boolean = () => true) {
return Object.keys(pagePath2PageInfoDict)
.filter(predicate)
.map(key => {
const path = key as PagePath;
const item: IPageNavItem = {
path,
info: pagePath2PageInfoDict[path],
};
return item;
});
}
4. Implementation Example
export class DemosComponent extends PageCoreComponent {
readonly navItems = getPagePath2PageInfoPairs(p => p.startsWith('/demos/'));
}
<nav *ngFor="let navItem of navItems; index as i">
<div class="nav-item"
[routerLink]="navItem.path"
routerLinkActive="active"
>
<div>{{ navItem.info.pageTitle }}</div>
</div>
</nav>
https://i.stack.imgur.com/lhkVj.png