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.template.html |
Properties |
Methods |
Inputs |
constructor(headerService: HeaderService)
|
||||||
|
Parameters :
|
nodes
|
Navigator nodes list.
Type : |
open
|
Determines whether the navigator menu should be open/closed.
Default value : |
| 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$ |
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-display (nodeClick)="collapseNavigator($event)" [node]="node" *ngFor="let node of nodes trackBy trackByPathOrLabel" [isRoot]="true"></c8y-navigator-node-display>
</ul>
<ng-content select=".navigator-slot-bottom"></ng-content>
</nav>