Web SDK documentation
  1. Components
  2. NavigatorNodeComponent

File

core/navigator/navigator-node.component.ts

Description

Navigator node renderer.

Implements

OnDestroy

Metadata

selector c8y-navigator-node
templateUrl ./navigator-node.component.html

Index

Properties
Methods
Inputs
Outputs
Accessors

Constructor

constructor(componentFactoryResolver: ComponentFactoryResolver, navigator: NavigatorService)
Parameters :
Name Type Optional
componentFactoryResolver ComponentFactoryResolver No
navigator NavigatorService No

Inputs

isRoot
Type : boolean

Determines whether the navigator node is a root node (top node in the hierarchy).
node
Type : NavigatorNode

Navigator node.

Outputs

nodeClick
Type : EventEmitter<string>

Event emitter responsible for broadcasting one of the following events: "icon", "expander" or "link" as string value.

The type of event depends on where you click on the navigator node:

  • clicking the icon will broadcast the event "icon",
  • clicking the expander will broadcast the event "expander",
  • clicking the label will broadcast the event "link".

Methods

click
click(from: "icon" | "expander" | "link", $event?: MouseEvent)

Click event handler.

Parameters :
Name Type Optional Default value Description
from "icon" | "expander" | "link" No 'link'

Source of the click event.
$event MouseEvent Yes
Returns : void
expandCollapse
expandCollapse(open, recursive?, forNode: ClickOptions)

Expands or collapses the navigator node and its children recursively.

Parameters :
Name Type Optional Default value Description
open No

Open or close the node.
recursive Yes

Open or close the children.
forNode ClickOptions No {}

Click options.
Returns : void
openOnFirstUrl
openOnFirstUrl()

Expands the navigator node when the URL matches the path provided in the node.

Returns : void

Properties

parentNode
Type : NavigatorNodeComponent

Parent node renderer.

Accessors

expandTitle
getexpandTitle()

Returns the expander title.

 
<div
  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>

results matching ""

    No results matching ""