core/navigator/navigator-outlet.component.ts

Description

The component shows all nodes that have been added to the navigator. In addition, it allows you to add a header and a footer to the navigator.

Example :

<c8y-navigator-outlet>
  <header class="navigator-slot-top"></header>
  <footer class="navigator-slot-bottom"></footer>
</c8y-navigator-outlet>

Example

Metadata

host	`{ }`
selector	`c8y-navigator-outlet, c8y-ui-navigator`
standalone	`true`
imports	`C8yTranslateDirective` `SkipLinkDirective` `NgFor` `NavigatorNodeComponent` `C8yTranslatePipe` `AsyncPipe`
templateUrl	`./navigator-outlet.component.html`

Relationships

Used by

NavigatorModule

Depends on

<div class="navigatorContent" role="navigation" [attr.aria-label]="'Main navigation' | translate">
  <button class="sr-only sr-only-focusable btn btn-default btn-sm" tabindex="0" [c8ySkipLink]="'main-content'" translate>Skip to content</button>
  <c8y-navigator-node
    (nodeClick)="collapseNavigator($event)"
    [node]="node"
    *ngFor="let node of nodes$ | async; trackBy: trackByPathOrLabel"
    [isRoot]="true"
    class="d-contents"
  ></c8y-navigator-node>
</div>