Provider

Generated by website/scripts/generate-api.ts from packages/gridla/src. Do not edit by hand; run bun run generate in website/.

GridProviderComponent (<gridla-provider> or [gridlaProvider]) owns layout and gesture state for one canvas and provides an injectable GridController to its content. provideGridla registers application-wide defaults.

import { GRID_TRANSFER_SCOPE, GridController, GRIDLA_OPTIONS, GridProviderComponent, provideGridla, provideGridTransferScope } from 'gridla/angular'

Export	Kind	Summary
`GRID_TRANSFER_SCOPE`	const	Injection token for the `TransferScope` a provider registers with.
`GridController`	class	Injectable owner of one canvas: a `createGridController` handle from `gridla/interaction` wrapped in signals.
`GRIDLA_OPTIONS`	const	Injection token for the application-wide defaults registered with `provideGridla`.
`GridProviderComponent`	component	Owns layout state and gesture state for one canvas.
`provideGridla`	function	Register application-wide defaults for every `gridlaProvider`: solver options (`gap`, `snapDistance`, `snap`, `onTrace`) plus `responsive`, `dragThreshold`, and `keyboardStep`.
`provideGridTransferScope`	function	Providers for a transfer scope.

Functions

provideGridla

function · angular/provide.ts:32

Register application-wide defaults for every gridlaProvider: solver options (gap, snapDistance, snap, onTrace) plus responsive, dragThreshold, and keyboardStep. Add it to bootstrapApplication or a route's providers. Optional: providers work without it.

export function provideGridla(options: GridlaOptions = {}): EnvironmentProviders

provideGridTransferScope

function · angular/provide.ts:41

Providers for a transfer scope. GridTransferScopeComponent uses this; add it to a component's providers to make every gridlaProvider inside that component share one scope without an extra element.

export function provideGridTransferScope(): Provider[]

Components

GridProviderComponent

component · angular/provider.component.ts:34

Owns layout state and gesture state for one canvas. Use it as an element (\<gridla-provider\>) or as an attribute on any element ([gridlaProvider]); it provides a GridController to everything inside. Place a \<gridla-canvas\> inside it. Nested layouts are nested providers.

Controlled: bind [layout] and listen to (layoutChange), or use [(layout)]. Uncontrolled: pass [defaultLayout]. Every SolveOptions field is an input; [config] takes them as one object.

export class GridProviderComponent<TData = unknown> implements OnInit // selector: gridla-provider, [gridlaProvider]

Member	Type	Description
`controller`	`GridController\<TData\>`	The controller this provider owns.
`layout`	`InputSignal<GridLayout<TData> \	undefined>`
`defaultLayout`	`InputSignal<GridLayout<TData> \	undefined>`
`config`	`InputSignal<GridlaOptions \	undefined>`
`responsive`	`InputSignalWithTransform<boolean \	undefined, unknown>`
`dragThreshold`	`InputSignalWithTransform<number \	undefined, unknown>`
`keyboardStep`	`InputSignalWithTransform<number \	undefined, unknown>`
`gap`	`InputSignalWithTransform<number \	undefined, unknown>`
`snapDistance`	`InputSignalWithTransform<number \	undefined, unknown>`
`snap`	`InputSignalWithTransform<boolean \	undefined, unknown>`
`onTrace`	`InputSignal<TraceCallback \	undefined>`
`selectedId`	`InputSignal<string \	null \
`acceptTransfers`	`InputSignalWithTransform<boolean \	((item: GridItem<TData>, sourceId: string) => boolean) \
`layoutChange`	`OutputEmitterRef\<GridLayout\<TData\>\>`	The next layout after every accepted change. Enables `[(layout)]`.
`layoutChangeDetail`	`OutputEmitterRef\<GridLayoutChangeEvent\<TData\>\>`	The next layout together with the `GridChangeDetail` that produced it.
`commit`	`OutputEmitterRef\<GridChangeDetail\>`	The solver strategy of every accepted interactive commit.
`selectedIdChange`	`OutputEmitterRef<string \	null>`
`transferIn`	`OutputEmitterRef\<GridTransferInEvent\<TData\>\>`	An item arrived from another canvas inside a transfer scope.
`transferOut`	`OutputEmitterRef\<GridTransferOutEvent\>`	An item left for another canvas inside a transfer scope.
`ngOnInit`	`() =\> void`	Seeds an uncontrolled layout and applies the initial options.

Classes

GridController

class · angular/controller.ts:37

Injectable owner of one canvas: a createGridController handle from gridla/interaction wrapped in signals. GridProviderComponent provides one instance per provider and forwards its inputs; children inject it with inject(GridController) (or the injectGrid* helpers) to read state and call actions. Standalone use: add it to a component's providers and call setOptions yourself.

export class GridController<TData = unknown> implements OnDestroy

Member	Type	Description
`handle`	`GridControllerHandle\<TData\>`	The underlying framework-neutral controller.
`id`	`string`	Id of this controller. Used by transfer scopes.
`store`	`GridStore\<GridState\<TData\>\>`	State store. The signals below are derived from it.
`actions`	`GridActions\<TData\>`	Imperative layout and selection API. Stable for the controller's lifetime.
`gesture`	`GridGestureApi\<TData\>`	Low-level gesture API. Stable for the controller's lifetime.
`state`	`Signal\<GridState\<TData\>\>`	The whole controller state as a signal.
`layout`	`Signal\<GridLayout\<TData\>\>`	The rendered layout (projected onto the measured canvas size).
`sourceLayout`	`Signal\<GridLayout\<TData\>\>`	The layout the provider was given, in its own coordinates.
`visibleLayout`	`Signal\<GridLayout\<TData\>\>`	The layout to paint right now: the preview during a gesture, else the rendered layout.
`interaction`	`Signal<GridInteraction \	null>`
`preview`	`Signal<GridPreview<TData> \	null>`
`selectedId`	`Signal<string \	null>`
`dragging`	`Signal\<boolean\>`	True while a move or resize is in progress.
`select`	`\<TSlice\>(selector: (state: GridState\<TData\>) =\> TSlice, equal?: ValueEqualityFn\<TSlice\>) =\> Signal\<TSlice\>`	A signal over a slice of the state. Recomputes on every store change and notifies dependents only when `equal` (default `Object.is`) says the slice changed.
`itemView`	`(itemId: string \	Signal<string>) => Signal<GridItemView>`
`getConfig`	`() =\> GridControllerConfig`	The resolved configuration currently in effect.
`setOptions`	`(options: GridControllerOptions\<TData\>) =\> void`	Apply options: callbacks, config fields, the controlled `layout` and `selectedId`. Application defaults from `provideGridla` fill in fields left `undefined`. `GridProviderComponent` calls this from an effect over its inputs.
`setLayout`	`(layout: GridLayout\<TData\>) =\> void`	Sync a layout into the store without reporting a change (used for `defaultLayout`).
`setSize`	`(size: GridSize \	null) => void`
`ngOnDestroy`	`() =\> void`	Stops the store subscription and destroys the underlying controller.

Constants

GRID_TRANSFER_SCOPE

const · angular/provide.ts:24

Injection token for the TransferScope a provider registers with. GridTransferScopeComponent provides it; inject it optionally to participate in transfers from custom code.

export const GRID_TRANSFER_SCOPE: InjectionToken<TransferScope>

GRIDLA_OPTIONS

const · angular/provide.ts:17

Injection token for the application-wide defaults registered with provideGridla. Inject it to read the defaults; provide it directly when provideGridla is not an option (for example inside a component's providers array).

export const GRIDLA_OPTIONS: InjectionToken<GridlaOptions>

#Provider

#Functions

#provideGridla

#provideGridTransferScope

#Components

#GridProviderComponent

#Classes

#GridController

#Constants

#GRID_TRANSFER_SCOPE

#GRIDLA_OPTIONS