Skip to content
MemberJunction

@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

Section titled “Installation”
Terminal window
npm install @memberjunction/ng-trees

Overview

Section titled “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

Usage

Section titled “Usage”

Module Import

Section titled “Module Import”
import { TreesModule } from '@memberjunction/ng-trees';


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

Basic Tree

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

Tree with Leaf Entities

Section titled “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>

Tree Dropdown

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

Components

Section titled “Components”
ComponentSelectorPurpose
TreeComponentmj-treeStandalone hierarchical tree view
TreeDropdownComponentmj-tree-dropdownDropdown with tree popup

Configuration Types

Section titled “Configuration Types”

TreeBranchConfig

Section titled “TreeBranchConfig”
PropertyTypeDefaultDescription
EntityNamestring—Entity for branch nodes (required)
DisplayFieldstring'Name'Field to display as label
IDFieldstring'ID'Primary key field
ParentIDFieldstring'ParentID'Field for parent hierarchy
IconFieldstring—Field for dynamic icons
DefaultIconstring'fa-solid fa-folder'Fallback icon
ExtraFilterstring—Optional RunView filter
OrderBystring'Name ASC'Sort order

TreeLeafConfig

Section titled “TreeLeafConfig”
PropertyTypeDefaultDescription
EntityNamestring—Entity for leaf nodes (required)
DisplayFieldstring'Name'Field to display as label
ParentForeignKeystring—FK linking to branch entity
DefaultIconstring'fa-solid fa-file'Fallback icon

TreeJunctionConfig

Section titled “TreeJunctionConfig”

For many-to-many relationships via junction tables:

PropertyTypeDescription
EntityNamestringJunction entity name
LeafForeignKeystringFK referencing leaf entity
BranchForeignKeystringFK referencing branch entity

Key Inputs

Section titled “Key Inputs”
InputTypeDefaultDescription
BranchConfigTreeBranchConfig—Branch entity config (required)
LeafConfigTreeLeafConfig—Optional leaf entity config
JunctionConfigTreeJunctionConfig—Optional junction config
SelectionMode'none' | 'single' | 'multiple''none'Selection behavior
SelectableTypes'all' | 'branches' | 'leaves''all'Which node types are selectable
AutoLoadbooleantrueLoad data on init

Event System

Section titled “Event System”

Uses the BeforeX/AfterX cancelable pattern:

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

Dependencies

Section titled “Dependencies”