Getting the hook Navigators to work in a cockpit application

,
1

This is a follow-up to a previous post I made regarding setting up a cockpit application.

I am now able to login with my credentials and want to add a hook node to navigate to the application. The tutorial advises to add the following to the properties object in app.module.ts:

{
      provide: HOOK_NAVIGATOR_NODES,
      useValue: [{
        label: 'Hello',  
        path: 'hello',
        icon: 'rocket',
        priority: 1000
      }] as NavigatorNode[],         // 1
      multi: true
}

When I tried this, however, I received a message via IntelliSense that this hook has been deprecated, so I used a hookNavigator instead:

{
    hookRoute({                     // 1
      path: 'hello',
      component: HelloComponent,
    }),
    hookNavigator([
      {
         context: ViewContext.Device,
         path: '/hello',
         component: HelloComponent,
         label: 'hello',
         priority: 100,
         icon: 'rocket'
      }

The problem that I am getting now is that the name of the application appears in the navigation bar, but not as part of the list of navigator nodes, meaning that I cannot click on it and it does not display an icon in front of it like the other nodes.

image
image617×513 14.8 KB

2

Hi Lucas,

remove context and component from the NavigatorNode object. I think the property context doesn’t even exist for the NavigatorNode. Because you are setting the component, it uses the HelloComponent to render the navigation entry in the menu, instead of the default navigation entry component.

Best regards


Christian Guether

1 Like