# ComponentRendererService

Import it from `@grafloria/angular`.

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

```ts
@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
// 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);
```