core/navigator/navigator-outlet.component.ts
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>| host | { |
| selector | c8y-navigator-outlet, c8y-ui-navigator |
| templateUrl | ./navigator-outlet.component.html |
Properties |
Methods |
constructor(headerService: HeaderService, navigatorNodes: NavigatorService)
|
|||||||||
|
Parameters :
|
| collapseNavigator | ||||||
collapseNavigator(from: "icon" | "expander" | "link")
|
||||||
|
Closes the navigator menu after clicking an item in the menu, in case of insufficient screen width.
Parameters :
Returns :
void
|
| nodes$ |
Type : Observable<NavigatorNode[]>
|
|
Navigator nodes list. |
<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>