Skip to main content

glint-tree-view

The glint-tree-view component is a flexible and dynamic component used to render a hierarchical tree view for any given model. It works by inspecting the model's type and dynamically loading the appropriate TreeComponent to render the tree structure.

Usage​

Use the glint-tree-view component by passing the model you wish to display as a tree to its [model] input.

<glint-tree-view [model]="model"></glint-tree-view>

Properties​

  • [model]: The root model element for which the tree view will be rendered.

The Role of TreeComponent​

The glint-tree-view component does not have its own rendering logic. Instead, it acts as a container that looks up and displays a dedicated TreeComponent based on the type of the model it receives.

Each TreeComponent is responsible for rendering its specific model type as a node in the tree and can recursively call other TreeComponents for its child elements.

Providing TreeComponent Implementations​

You can make your custom TreeComponents available to the glint-tree-view component using two primary methods.

1. Via @Component Providers​

This method is suitable for providing a TreeComponent that is closely tied to a specific Angular component. You can add the provider directly in the @Component decorator.

@Component({
  //...
  providers: [
    {
      provide: TREE_COMPONENT, // The injection token for tree components
      multi: true,             // Essential to allow multiple components to be registered
      useValue: [
        {
          _type: 'elements::DataElement::model', // Matches the model type (e.g., 'elements::DataElement')
          component: DataElementTreeComponent    // The component to render for this model type
        }
      ]
    }
  ]
})
export class MyComponent {}

For plugins and larger applications, it is highly recommended to register your TreeComponents using the ExtensionModule. This approach keeps your components decoupled and makes them easily configurable.

@NgModule({
  imports: [
    ExtensionModule.forExtension({
      // Register tree components here
      treeNodeComponents: [
        {
          type: 'elements::DataElement',      // The model type to match
          component: DataElementTreeComponent // The component to render
        }
      ]
    })
  ]
})
export class MyExtensionModule {}