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.
<c8y-navigator-outlet [nodes]="navigatorService.items$ | async" [open]="isOpen">
<header class="navigator-slot-top"></header>
<footer class="navigator-slot-bottom"></footer>
</c8y-navigator-outlet>| selector | c8y-navigator-outlet, c8y-ui-navigator |
| templateUrl | ./navigator-outlet.component.html |
Properties |
Methods |
Inputs |
constructor(headerService: HeaderService)
|
||||||
|
Parameters :
|
| nodes |
Type : NavigatorNode[]
|
|
Navigator nodes list. |
| open |
Type : boolean
|
Default value : true
|
|
Determines whether the navigator menu should be open/closed. |
| 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
|
| isShown$ |
Type : BehaviorSubject<boolean>
|
Default value : new BehaviorSubject<boolean>(false)
|
|
Determines whether the navigator pane should be rendered. |
<nav class="navigator" *ngIf="isShown$ | async" [ngClass]="{ open: open }">
<ng-content select=".navigator-slot-top"></ng-content>
<ul class="navigatorContent">
<c8y-navigator-node (nodeClick)="collapseNavigator($event)" [node]="node" *ngFor="let node of nodes trackBy trackByPathOrLabel" [isRoot]="true"></c8y-navigator-node>
</ul>
<ng-content select=".navigator-slot-bottom"></ng-content>
</nav>