@memberjunction/ng-trees

Angular tree and tree-dropdown components for displaying and selecting from hierarchical entity data. Supports branch/leaf entity configurations, junction table relationships, keyboard navigation, and a BeforeX/AfterX event system.

Installation

npm install @memberjunction/ng-trees
Copy

Overview

The tree package provides two components: a standalone tree view (mj-tree) and a dropdown variant (mj-tree-dropdown). Both load data from MemberJunction entities using RunView, support branch (category/folder) and leaf (item) entity configurations, and handle many-to-many relationships through junction table configuration.

flowchart TD
    subgraph Config["Entity Configuration"]
        A["TreeBranchConfig (categories)"]
        B["TreeLeafConfig (items)"]
        C["TreeJunctionConfig (M2M)"]
    end
    subgraph Components["Components"]
        D["TreeComponent (mj-tree)"]
        E["TreeDropdownComponent (mj-tree-dropdown)"]
    end
    subgraph Data["Data Loading"]
        F["RunView API"]
        G["Branch Hierarchy"]
        H["Leaf Items"]
        I["Junction Records"]
    end

    Config --> D
    Config --> E
    D --> F
    F --> G
    F --> H
    F --> I

    style Config fill:#2d6a9f,stroke:#1a4971,color:#fff
    style Components fill:#7c5295,stroke:#563a6b,color:#fff
    style Data fill:#2d8659,stroke:#1a5c3a,color:#fff
Copy

Usage

Module Import

import { TreesModule } from '@memberjunction/ng-trees';

@NgModule({
  imports: [TreesModule]
})
export class YourModule {}
Copy

Basic Tree

<mj-tree
  [BranchConfig]="{
    EntityName: 'Query Categories',
    DisplayField: 'Name',
    ParentIDField: 'ParentID',
    DefaultIcon: 'fa-solid fa-folder'
  }"
  [SelectionMode]="'single'"
  (afterNodeSelect)="onNodeSelected($event)">
</mj-tree>
Copy

Tree with Leaf Entities

<mj-tree
  [BranchConfig]="{
    EntityName: 'Query Categories',
    DisplayField: 'Name',
    ParentIDField: 'ParentID'
  }"
  [LeafConfig]="{
    EntityName: 'Queries',
    DisplayField: 'Name',
    ParentForeignKey: 'CategoryID',
    DefaultIcon: 'fa-solid fa-database'
  }"
  [SelectionMode]="'single'"
  [SelectableTypes]="'leaves'"
  (afterNodeSelect)="onQuerySelected($event)">
</mj-tree>
Copy

Tree Dropdown

<mj-tree-dropdown
  [BranchConfig]="categoryConfig"
  [LeafConfig]="itemConfig"
  [Placeholder]="'Select a category...'"
  [AllowClear]="true"
  (afterNodeSelect)="onSelected($event)">
</mj-tree-dropdown>
Copy

Components

Configuration Types

TreeBranchConfig

TreeLeafConfig

TreeJunctionConfig

For many-to-many relationships via junction tables:

Key Inputs

Event System

Uses the BeforeX/AfterX cancelable pattern:

• beforeNodeSelect / afterNodeSelect
• beforeNodeDeselect / afterNodeDeselect
• beforeNodeExpand / afterNodeExpand
• beforeNodeCollapse / afterNodeCollapse
• beforeNodeClick / afterNodeClick
• beforeNodeDoubleClick / afterNodeDoubleClick
• beforeDataLoad / afterDataLoad

Dependencies

• @memberjunction/core -- RunView for data loading
• @memberjunction/core-entities -- Entity types