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 applicationsApplicationThe overarching model container grouping all components, domain logic, and configurations for an enterprise solution., 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 {}