Basic

A node is .ng-treeview-node > .ng-treeview-item (.ng-treeview-icon + .ng-treeview-label), with a nested .ng-treeview-children. Add .is-open to expand a node by default. Opt in to click/Enter selection with data-treeview-selectable.

Project

src
- components
  - button.scss
  - card.scss
- index.ts
README.md

treeview.html

<div class="ng-treeview" data-treeview-selectable style="max-width:320px">
    <div class="ng-treeview-title">Project</div>
    <ul class="ng-treeview-group">
        <li class="ng-treeview-node is-open">
            <div class="ng-treeview-item">
                <i class="ng-treeview-icon ph-fill ph-folder"></i>
                <span class="ng-treeview-label">src</span>
            </div>
            <ul class="ng-treeview-children">
                <li class="ng-treeview-node">
                    <div class="ng-treeview-item">
                        <i class="ng-treeview-icon ph-fill ph-folder"></i>
                        <span class="ng-treeview-label">components</span>
                    </div>
                    <ul class="ng-treeview-children">
                        <li class="ng-treeview-node"><div class="ng-treeview-item"><i class="ng-treeview-icon ph ph-file"></i><span class="ng-treeview-label">button.scss</span></div></li>
                        <li class="ng-treeview-node"><div class="ng-treeview-item"><i class="ng-treeview-icon ph ph-file"></i><span class="ng-treeview-label">card.scss</span></div></li>
                    </ul>
                </li>
                <li class="ng-treeview-node"><div class="ng-treeview-item"><i class="ng-treeview-icon ph ph-file-ts"></i><span class="ng-treeview-label">index.ts</span></div></li>
            </ul>
        </li>
        <li class="ng-treeview-node"><div class="ng-treeview-item"><i class="ng-treeview-icon ph ph-file"></i><span class="ng-treeview-label">README.md</span></div></li>
    </ul>
</div>

Custom toggle icons

Override the caret glyphs with data-expand-icon / data-collapse-icon (any ph-*). Different glyphs swap instead of rotating.

Assets
- logo.svg
- hero.webp

treeview.html

<div class="ng-treeview" data-expand-icon="ph-plus" data-collapse-icon="ph-minus" style="max-width:320px">
    <ul class="ng-treeview-group">
        <li class="ng-treeview-node is-open">
            <div class="ng-treeview-item"><i class="ng-treeview-icon ph-fill ph-package"></i><span class="ng-treeview-label">Assets</span></div>
            <ul class="ng-treeview-children">
                <li class="ng-treeview-node"><div class="ng-treeview-item"><i class="ng-treeview-icon ph ph-image"></i><span class="ng-treeview-label">logo.svg</span></div></li>
                <li class="ng-treeview-node"><div class="ng-treeview-item"><i class="ng-treeview-icon ph ph-image"></i><span class="ng-treeview-label">hero.webp</span></div></li>
            </ul>
        </li>
    </ul>
</div>

Checkable

Opt in to checkboxes with data-treeview-checkable="all" (folders + files, tri-state) or "leaves" (files only). Fires ng:treeview:check.

Docs
- intro.md
- guide.md

treeview.html

<div class="ng-treeview" data-treeview-checkable="all" style="max-width:320px">
    <ul class="ng-treeview-group">
        <li class="ng-treeview-node is-open">
            <div class="ng-treeview-item"><i class="ng-treeview-icon ph-fill ph-folder"></i><span class="ng-treeview-label">Docs</span></div>
            <ul class="ng-treeview-children">
                <li class="ng-treeview-node"><div class="ng-treeview-item"><i class="ng-treeview-icon ph ph-file-doc"></i><span class="ng-treeview-label">intro.md</span></div></li>
                <li class="ng-treeview-node"><div class="ng-treeview-item"><i class="ng-treeview-icon ph ph-file-doc"></i><span class="ng-treeview-label">guide.md</span></div></li>
            </ul>
        </li>
    </ul>
</div>

Anatomy

ng-treeview ng-treeview-title ng-treeview-group ng-treeview-node ng-treeview-item ng-treeview-icon ng-treeview-label ng-treeview-children

Attributes

data-treeview-selectable data-treeview-checkable="all|leaves" data-expand-icon data-collapse-icon is-open

Events

ng:treeview:expand ng:treeview:collapse ng:treeview:select ng:treeview:check

Reference

Generated from the component source (_ng_treeview.scss · ng_treeview.js).

Component info

Name	`treeview`
Type	`css+js`
Version	`1.1.0`
Status	`stable`
CSS	`/assets/css/components/_ng_treeview.scss`
JS	`/assets/js/ng_treeview.js`

Classes

.ng-treeview .ng-treeview-check .ng-treeview-check-spacer .ng-treeview-children .ng-treeview-collapse .ng-treeview-group .ng-treeview-icon .ng-treeview-item .ng-treeview-label .ng-treeview-node .ng-treeview-title .ng-treeview-toggle .ng-treeview-toggle-spacer

Tokens

--ng-tree-check-accent --ng-tree-check-size --ng-tree-gap --ng-tree-hover-bg --ng-tree-icon-color --ng-tree-indent --ng-tree-item-pad-x --ng-tree-item-pad-y --ng-tree-label-color --ng-tree-muted --ng-tree-row-gap --ng-tree-selected-bg --ng-tree-selected-color --ng-tree-toggle-size --ng-tree-transition

Events

ng:treeview:check ng:treeview:collapse ng:treeview:expand ng:treeview:select