Skip to main content

glint-tree-node

Node of a tree. These can be nested to create a tree view

<glint-tree-node [collapsed]="false">
  <span icon class="material-symbol glint-icon-small">folder</span>
  <div label>workspace</div>
  <ng-template glintTreeContent>
    <glint-tree-node>
      <span icon class="material-symbol glint-icon-small">folder</span>
      <div label>project 1</div>
      <!-- ... -->
    </glint-tree-node>
    <!-- ... -->
  </ng-template>
  <glint-context-menu>
    <!-- context menu options -->
  </glint-context-menu>
</glint-tree-node>
  • [collapsed] (default=true): If set to false, the tree node will be expanded on render.
  • icon: Add this attribute to any icon for the tree node label.
  • label: Add this attribute to the text label.
  • glintTreeContext: Add to a template that holds the content of the tree node.
  • <glint-context-menu>: If you add a context menu to the tree node, it will be bound automatically. There will also be a 3-dots menu button that will appear when hovering the tree node to open the context menu.