ComponentRendererService

Import it from @grafloria/angular.

Service for rendering Angular components inside SVG foreignObject elements. Manages component lifecycle, inputs/outputs, and container management.

ts
Copy
@Injectable({ providedIn: 'root' })
export class ComponentRendererService

Methods

• constructor( private injector: Injector, private applicationRef: ApplicationRef )
• registerComponent(nodeType: string, component: Type<any>): void — Register an Angular component for a node type. Component will be rendered inside foreignObject when node is displayed.
• unregisterComponent(nodeType: string): void — Unregister a component for a node type. No-op if the type was never registered. Enables override/replace flows (register a new component for an existing type) without loosening the strict duplicate check in {@link registerComponent}.
• hasComponent(nodeType: string): boolean — Check if component is registered for node type.
• getRegisteredComponent(nodeType: string): Type<any> | null — Get registered component class for node type.
• renderComponent( node: DiagramNode, viewContainerRef: ViewContainerRef, options?: RenderComponentOptions ): ComponentRef<any> — Render a component for a diagram node. Creates component instance, passes inputs, subscribes to outputs.
• updateComponent(nodeId: string, inputs: Record<string, any>): void — Update component inputs without recreating component. More efficient than destroy + render.
• destroyComponent(nodeId: string): void — Destroy a component and clean up resources. Calls ngOnDestroy, unsubscribes, removes from DOM.
• getComponent<T = any>(nodeId: string): ComponentRef<T> | null — Get component reference for a node. Allows programmatic access to component instance.
• getContainerId(nodeId: string): string | null — Get foreignObject container ID for a node.
• createForeignObjectVNode( node: DiagramNode, bounds: ComponentBounds ): VNode — Create foreignObject VNode for a component. Used by rendering pipeline to embed component in SVG.
• batchUpdate(updates: ComponentUpdate[]): void — Batch update multiple components. More efficient than individual updates.
• destroyAll(): void — Destroy all components. Called when diagram is cleared or component unmounted.
• getActiveCount(): number — Get count of active component instances. Useful for debugging and performance monitoring.
• getRegisteredTypes(): string[] — Get list of all registered node types. Useful for component palette UI and validation.

Example

typescript
Copy
// Register a component
componentRenderer.registerComponent('ERD.TABLE', ErdTableComponent);

// Render a component
const componentRef = componentRenderer.renderComponent(
  node,
  viewContainerRef,
  { inputs: { tableName: 'users', columns: [...] } }
);

// Update component
componentRenderer.updateComponent(node.id, { tableName: 'products' });

// Destroy component
componentRenderer.destroyComponent(node.id);