core/navigator/navigator-node.component.ts
Navigator node renderer.
| selector | c8y-navigator-node |
| templateUrl | ./navigator-node.component.html |
Properties |
Methods |
Inputs |
Outputs |
Accessors |
constructor(navigator: NavigatorService)
|
||||||
|
Parameters :
|
| isRoot |
Type : boolean
|
|
Determines whether the navigator node is a root node (top node in the hierarchy). |
| node |
Type : NavigatorNode
|
|
Navigator node. |
| click | |||||||||||||||
click(from: "icon" | "expander" | "link", $event?: MouseEvent)
|
|||||||||||||||
|
Click event handler.
Parameters :
Returns :
void
|
| expandCollapse | ||||||||||||||||||||
expandCollapse(open, recursive?, forNode: ClickOptions)
|
||||||||||||||||||||
|
Expands or collapses the navigator node and its children recursively.
Parameters :
Returns :
void
|
| openOnFirstUrl |
openOnFirstUrl()
|
|
Expands the navigator node when the URL matches the path provided in the node.
Returns :
void
|
| parentNode |
Type : NavigatorNodeComponent
|
|
Parent node renderer. |
| expandTitle |
getexpandTitle()
|
|
Returns the expander title. |
<ng-container *ngIf="node.component">
<ng-container *ngComponentOutlet="node.component; injector: node.injector"></ng-container>
</ng-container>
<div
*ngIf="!node.component"
class="slot"
[hidden]="node.hidden"
(dragstart)="node.dragStart($event)"
(dragend)="node.dragEnd($event)"
(drop)="node.drop($event)"
[draggable]="node.draggable"
[ngClass]="{ dragged: node.dragged, disabled: node.loading }"
>
<ng-container>
<a
class="link"
draggable="false"
(dragover)="node.canDrop && $event.preventDefault()"
(dragenter)="node.canDrop && node.dragEnter($event)"
(dragleave)="node.canDrop && node.dragLeave($event)"
title="{{ node.label | translate }}"
[attr.id]="isRoot ? node.id : undefined"
[routerLink]="node.canNavigate ? node.path : undefined"
[routerLinkActive]="node.canNavigate ? 'active' : ''"
[routerLinkActiveOptions]="{ exact: node.routerLinkExact }"
(click)="click(node.canNavigate ? 'link' : 'expander', $event)"
[ngClass]="{
'root-link': isRoot,
open: node.open && node.hasChildren,
parent: node.hasChildren,
'dragged-hover': node.draggedHover && !node.dragged
}"
>
<ng-container *ngTemplateOutlet="inner"></ng-container>
</a>
</ng-container>
<div
class="children panel-expand expand"
*ngIf="node.children.length"
[collapse]="!node.open"
[isAnimated]="true"
>
<c8y-navigator-node
*ngFor="let childNode of node.children"
[node]="childNode"
(nodeClick)="nodeClick.emit($event)"
></c8y-navigator-node>
</div>
</div>
<ng-template #inner>
<!-- loader -->
<i
class="icon-spin loadingIndicator"
[c8yIcon]="'circle-o-notch'"
*ngIf="node.loading && !isRoot"
></i>
<!-- icon -->
<div>
<ng-container #icon></ng-container>
</div>
<!--title -->
<span>{{ node.label | translate }}</span>
<i
class="expander"
[c8yIcon]="'chevron-down'"
*ngIf="node.hasChildren"
(click)="click('expander', $event)"
title="{{ expandTitle }}"
></i>
<c8y-popover-confirm
[outsideClick]="true"
containerClass="navigator-popover"
></c8y-popover-confirm>
</ng-template>