Core

Import these from @grafloria/angular.

Functions

provideGrafloria

The modern Angular configuration idiom:

ts
Copy
bootstrapApplication(AppComponent, {
  providers: [provideGrafloria({ theme: DARK_THEME })],
});

ts
Copy
function provideGrafloria(config: GrafloriaConfig): EnvironmentProviders

Classes

AngularComponentAdapter

Angular implementation of ComponentAdapter interface

Thin wrapper around ComponentRendererService that implements framework-agnostic ComponentAdapter interface.

ts
Copy
@Injectable({ providedIn: 'root' })
export class AngularComponentAdapter implements ComponentAdapter

Properties

Methods

• constructor(private componentRenderer: ComponentRendererService)
• registerComponent(nodeType: string, component: Type<any>): void — Register Angular component for node type
• hasComponent(nodeType: string): boolean — Check if component is registered for node type
• getComponent(nodeType: string): Type<any> | undefined — Get registered component class
• createComponentInstance(node: NodeModel, container: ViewContainerRef): ComponentRef<any> — Create Angular component instance for node

Converts NodeModel to component inputs:

• Spreads node.data as inputs
• Passes positionX, positionY
• Passes nodeData (full node data object)
• updateComponentInstance(instance: ComponentRef<any>, node: NodeModel): void — Update component instance with new node data
• destroyComponentInstance(instance: ComponentRef<any>): void — Destroy component instance
• getRegisteredTypes(): string[] — Get list of all registered node types
• destroyAll(): void — Destroy all component instances
• getActiveCount(): number — Get count of active component instances

GrafloriaHandleDirective

Directive to mark HTML elements as connection handles (React Flow style)

Usage:

html
Copy
<div grafloriaHandle="source" handleId="output-1" handlePosition="right">
  Connect Here
</div>

The directive automatically:

• Registers the handle with HandleRegistryService on init
• Unregisters on destroy
• Allows DOM-based position queries for connections

Hybrid HTML+SVG Rendering

ts
Copy
@Directive({
  selector: '[grafloriaHandle]',
  standalone: true,
})
export class GrafloriaHandleDirective implements AfterViewInit, OnDestroy

Properties

Methods

• ngAfterViewInit(): void
• ngOnDestroy(): void

GrafloriaNodeDefDirective

Declarative, Angular-native custom nodes — the template idiom:

html
Copy
<grafloria-diagram-canvas [(nodes)]="nodes" [(edges)]="edges">
  <ng-template grafloriaNode="card" let-node let-data="data">
    <div class="card">
      <h4>{{ data['title'] }}</h4>
      <p>{{ data['subtitle'] }}</p>
    </div>
  </ng-template>
</grafloria-diagram-canvas>

A node whose type matches a template is rendered by THAT template in the HTML layer — full Angular change detection, pipes, directives, and bindings, no string micro-templates and no component registry required. In controlled mode the canvas flags matching specs as custom automatically, so declaring the template is the whole integration.

grafloriaNode with no value (<ng-template grafloriaNode>) is the wildcard: it renders any HTML-layer node whose type has no exact template.

ts
Copy
@Directive({ selector: 'ng-template[grafloriaNode]' })
export class GrafloriaNodeDefDirective

Properties

Methods

• static ngTemplateContextGuard( _dir: GrafloriaNodeDefDirective, ctx: unknown ): ctx is GrafloriaNodeTemplateContext (static)

ResponsiveCanvasDirective

ts
Copy
@Directive({
  selector: '[grafloriaResponsiveCanvas]',
  standalone: true,
})
export class ResponsiveCanvasDirective implements OnInit, OnDestroy, OnChanges

Properties

Methods

• constructor(private el: ElementRef<HTMLElement>)
• ngOnInit()
• ngOnChanges(changes: any)
• enable() — Enable responsive behavior
• disable() — Disable responsive behavior
• toggle() — Toggle responsive behavior on/off
• isEnabled(): boolean — Check if responsive behavior is enabled
• triggerResize() — Manually trigger a resize operation
• ngOnDestroy()

Constants

GRAFLORIA_CONFIG

ts
Copy
const GRAFLORIA_CONFIG: any

Interfaces

GrafloriaConfig

Application-wide Grafloria defaults, set once at bootstrap. Explicit inputs on a specific <grafloria-diagram-canvas> always win over these.

ts
Copy
interface GrafloriaConfig

Properties

GrafloriaNodeTemplateContext

Template context for <ng-template grafloriaNode> custom-node templates.

$implicit is the live model, so let-node gives templates the full NodeModel surface; data is the free-form user payload for the common case.

ts
Copy
interface GrafloriaNodeTemplateContext

Properties

IResponsiveCanvasEngine

ts
Copy
interface IResponsiveCanvasEngine

Members

• getCanvas?(): HTMLElement | null
• getZoom(): number
• setZoom?(zoom: number): void
• getPan(): { x: number; y: number }
• setPan(x: number, y: number): void
• repaint?(): void