Skip to main content

glint-tree-view-extension

The glint-tree-view-extension component is a specialized tool for adding new nodes or content to an existing tree view. Unlike the glint-tree-view component, which renders a complete tree from a root model, the extension component allows plugins to contribute additional tree nodes to a tree that has already been rendered by another plugin.

Usage​

This component is typically used inside a TreeComponent provided by another plugin. It allows you to "hook into" the existing tree structure and render your own extension components for a specific model.

The glint-tree-view-extension should be placed within the <ng-template glintTreeContent> of the parent glint-tree-node.

Example:

<glint-tree-node>
  <div label>
    <span>{{model.name}}</span>
  </div>
  <demo-data-waterfall-context-actions [model]="model"/>

  <ng-template glintTreeContent>
    <div *ngIf="isAdditionalContentVisible">...</div>
    
    <glint-tree-view-extension [model]="model"/>
  </ng-template>
</glint-tree-node>

Providing TreeComponent Implementations for Extensions​

To have your custom component rendered by glint-tree-view-extension, you must provide it using the TREE_EXTENSION injection token.

1. Via @Component Providers​

You can register a tree extension component directly within a component's providers array. This method is useful when the extension is tightly coupled with a specific component.

@Component({
  //...
  providers: [
    {
      provide: TREE_EXTENSION, // The injection token for tree extension 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 as an extension for this model type
        }
      ]
    }
  ]
})
export class MyComponent {}

For plugins and modular extensions, it is best practice to register your components using the ExtensionModule. This decouples your extension from a specific component and makes it easily discoverable by the application.

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