Navigator module

This module is responsible for the navigator menu. It deals with functionalities such as adding/removing entries in the menu, as well as hiding/showing the entire navigator pane.

Usage examples

To make it easier to add entries to the navigator, we have created an auxiliary hook called HOOK_NAVIGATOR_NODES. With it, you can quickly and easily add new items in the navigator menu. To do this, follow these steps.

In yourModuleName.module.ts

Create menu items such as:

• top entry in the navigator (parent node),
• submenu (child node).

as follows:

import { HOOK_NAVIGATOR_NODES, NavigatorNode, gettext } from '@c8y/ngx-components';

...

// Parent node (top entry in the hierarchy)
const group = new NavigatorNode({
  label: gettext('Group'),
  path: '/group'
});

// Child node (visible under the group root node)
const subgroup = new NavigatorNode({
  label: gettext('Subgroup'),
  path: '/group/subgroup'
})

group.add(subgroup);

After creating entries for the navigator, we are ready for the final step. In the providers array, we need to use our navigator hook.

@NgModule({
  declarations: [...],
  imports: [...],
  providers: [{ provide: HOOK_NAVIGATOR_NODES, useValue: { get: () => group }, multi: true }]
  // or providers: [{ provide: HOOK_NAVIGATOR_NODES, useValue: [group], multi: true }]
})

For more information on the hook, check out our Web SDK for Angular in the section: see Libraries > Component library > Multi Provider in our Web SDK guide.