How do you create a dynamic menu?

Help Requests
1

In Au v1, there was an easy way to create dynamic menus:

<li repeat.for="nav of router.navigation" class="menu__group ${nav.isActive ? 'active' : ''}">

                    <a href.bind="nav.href" class="menu__link r-link text-underlined">${nav.title}</a>

                </li>

But this no longer works in Au v2…

The routes are defined in say “MyApp” in the docs… So I put that into the default dev-app main.ts

However, there’s no examples in how you would access this from the HTML or from sub-components.

I defined a main-page.html / main-page.ts, which doesn’t have the Routes, but MyApp does implement IRouteViewModel and it works fine for dynamic routes… But I’m trying to build “” navigation dynamically but it’s not clear the proper way to access it.

The docs don’t say how to access this router.navigation or routes.navigation, or if it was maybe permanently removed anyway since au1 (probably was removed but still, I was wondering if it exists, I don’t see many HTML examples in the docs).

I was wondering if we should just write our routes/navigation with our own custom object, which I can do so, but just wondering if there was a way to inject it from MyApp’s Routes static.

I can always just write it in HTML directly without any TypeScript, I was just wondering if there was a TypeScript “proper way” with the IRouteViewModel.

2

Router docs are on the way… rumour is that a brand new set of documentation pages on the topic of router will be published soon™
{anonymous source on the team}

1 Like
3

Oh wow awesome. Yes I think a few key themes (1) simple example (2) explanations of how it can get more complex (deeper topics or more rare use cases or techniques) then (3) more examples (sometimes the simple example is not enough).

BTW I did solve the above with looping through a “nav” object I created myself

assets/components/articles-main.ts

interface Navigation {
    isActive: boolean,
    title: string,
    href: string
}
export class MainFrame {
public routes: Navigation[];
....
this.routes = [
            {isActive: true, title: "Main", href: ""}, 
]

assets/components/articles-main.html

<a load.bind="nav.href" class="menu__link r-link text-underlined">${nav.title}</a>

dev-app/my-app.ts

import { ArticlesMain, ArticlesSingle } from "../src/assets/components";

export class MyApp implements IRouteViewModel {
  static title: string = 'm';
  static routes: Routeable[] = [
    {
      id: 'articles',
      path: 'articles',
      title: 'Articles',
      component: ArticlesMain
    },
    {
      id: 'art*path',
      path: 'article/*path',
      title: '*path',
      component: ArticlesSingle
    }]

It’s all starting to come together. Just have to trial-and-error a bit sometimes.

Also this one time, there was a warning in the transpiling that was at the top, and it took me days until I realized that warning helped me solve a big bug of naming my .ts files incorrectly.

Maybe re-repeat warnings in red/pink/yellow at the bottom of npm start? It’s not that I needed it, but I know that a lot of junior devs are notorious for giving up early.

Also keep up the great work. This is all working way better than other frameworks but just harder to figure out due to documentation being in alpha.

Those little sample projects in the sandbox are also faaaantastic help!

4

I have created this PR to add this infra to router-lite: feat(router-lite): navigation model by Sayan751 · Pull Request #1446 · aurelia/aurelia · GitHub.

Pinging @jwx for router-counterpart.