Router config Title, text only or can it contain HTML

Help Requests
1

I have some menu items in a PWA that are only available when the application is connected to the server, and not in offline mode. However, I want to leave the menu item visible, but add a decorator to the end Title text (for example a green dot) that indicates its online mode only.

If I just add a span to the Title text, it just displays as the raw text, which is expected. Is there a way to set the innerhtml instead of the text value? Or because its also used in the tab title is that something not wise to do, or would even work?

2

Ended up using similar technique as whether to show if authenticated or not, and setting based on the route item config.

Some snippets of using it for those that might need something similar

Route Item in app.ts

{
    route: ['manage-aircraft/:id?'],
    name: 'manage-aircraft',
    moduleId: PLATFORM.moduleName('./pages/admin/manage-aircraft'),
    nav: true,
    title: 'Aircraft',
    onlineOnly: true,
    auth: true,
    roles: ["instructor", "manager", "admin"],
    href: 'manage-aircraft/0'
 }

HTML

<ul class="navbar-nav mr-auto">
    <li repeat.for="row of routes | authFilter" class="nav-item ${row.isActive ? 'active' : ''}">
        <a class="nav-link" href.bind="row.href">${row.title}<span class="dot-online-only" if.bind="row.config.onlineOnly"/></a>
    </li>
</ul>
2 Likes