Class GridstackComponent

Angular component wrapper for GridStack.

This component provides Angular integration for GridStack grids, handling:

Grid initialization and lifecycle
Dynamic component creation and management
Event binding and emission
Integration with Angular change detection

Use in combination with GridstackItemComponent for individual grid items.

Example

<gridstack [options]="gridOptions" (change)="onGridChange($event)">
  <div empty-content>Drag widgets here</div>
</gridstack>

Implements

OnInit
AfterContentInit
OnDestroy

Index

Accessors

options

get options(): GridStackOptions
Get the current running grid options

Returns GridStackOptions
- Defined in angular/projects/lib/src/lib/gridstack.component.ts:121
set options(o: GridStackOptions): void
Grid configuration options. Can be set before grid initialization or updated after grid is created.
Parameters
- o: GridStackOptions
Returns void
Example
```
gridOptions: GridStackOptions = {
  column: 12,
  cellHeight: 'auto',
  animate: true
};
```
- Defined in angular/projects/lib/src/lib/gridstack.component.ts:113

el

get el(): GridCompHTMLElement
Get the native DOM element that contains grid-specific fields. This element has GridStack properties attached to it.

Returns GridCompHTMLElement
- Defined in angular/projects/lib/src/lib/gridstack.component.ts:191

grid

get grid(): undefined | GridStack
Get the underlying GridStack instance. Use this to access GridStack API methods directly.

Returns undefined | GridStack
Example
```
this.gridComponent.grid.addWidget({x: 0, y: 0, w: 2, h: 1});
```
- Defined in angular/projects/lib/src/lib/gridstack.component.ts:202

Constructors

constructor

new GridstackComponent(
elementRef: ElementRef<GridCompHTMLElement>,
): GridstackComponent
Parameters
- elementRef: ElementRef<GridCompHTMLElement>
Returns GridstackComponent
- Defined in angular/projects/lib/src/lib/gridstack.component.ts:248

Methods

`Static`registerComponents

registerComponents(typeList: Type<object>[]): void
Register Angular components for dynamic creation.

Each component is keyed by its @Component.selector string, which becomes the component field value in widget JSON (same role as component in React/Vue).
Parameters
- typeList: Type<object>[]
  Array of component types to register
Returns void
Example
```
GridstackComponent.registerComponents([MyWidgetComponent, AnotherWidgetComponent]);
```
- Defined in angular/projects/lib/src/lib/gridstack.component.ts:230

`Static`getSelector

getSelector(type: Type<object>): string
Extract the Angular selector string from a component type. This is used as the default component key in widget JSON.
Parameters
- type: Type<object>
Returns string
- Defined in angular/projects/lib/src/lib/gridstack.component.ts:238

ngOnInit

ngOnInit(): void
A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.

Returns void
Implementation of OnInit.ngOnInit
- Defined in angular/projects/lib/src/lib/gridstack.component.ts:262

ngAfterContentInit

ngAfterContentInit(): void
wait until after all DOM is ready to init gridstack children (after angular ngFor and sub-components run first)

Returns void
Implementation of AfterContentInit.ngAfterContentInit
- Defined in angular/projects/lib/src/lib/gridstack.component.ts:272

ngOnDestroy

ngOnDestroy(): void
A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.

Returns void
Implementation of OnDestroy.ngOnDestroy
- Defined in angular/projects/lib/src/lib/gridstack.component.ts:280

updateAll

updateAll(): void
called when the TEMPLATE (not recommended) list of items changes - get a list of nodes and update the layout accordingly (which will take care of adding/removing items changed by Angular)

Returns void
- Defined in angular/projects/lib/src/lib/gridstack.component.ts:294

checkEmpty

checkEmpty(): void
check if the grid is empty, if so show alternative content

Returns void
- Defined in angular/projects/lib/src/lib/gridstack.component.ts:305

`Protected`hookEvents

hookEvents(grid?: GridStack): void
get all known events as easy to use Outputs for convenience
Parameters
- Optionalgrid: GridStack
Returns void
- Defined in angular/projects/lib/src/lib/gridstack.component.ts:311

`Protected`unhookEvents

unhookEvents(grid?: GridStack): void
Parameters
- Optionalgrid: GridStack
Returns void
- Defined in angular/projects/lib/src/lib/gridstack.component.ts:338

Properties

`Optional`gridstackItems

gridstackItems?: QueryList<GridstackItemComponent>

List of template-based grid items (not recommended approach). Used to sync between DOM and GridStack internals when items are defined in templates. Prefer dynamic component creation instead.

`Optional`container

container?: ViewContainerRef

Container for dynamic component creation (recommended approach). Used to append grid items programmatically at runtime.

`Optional`isEmpty

isEmpty?: boolean

Controls whether empty content should be displayed. Set to true to show ng-content with 'empty-content' selector when grid has no items.

Example

<gridstack [isEmpty]="gridItems.length === 0">
  <div empty-content>Drag widgets here to get started</div>
</gridstack>

addedCB

addedCB: EventEmitter<nodesCB> = ...

Emitted when widgets are added to the grid

changeCB

changeCB: EventEmitter<nodesCB> = ...

Emitted when grid layout changes

disableCB

disableCB: EventEmitter<eventCB> = ...

Emitted when grid is disabled

dragCB

dragCB: EventEmitter<elementCB> = ...

Emitted during widget drag operations

dragStartCB

dragStartCB: EventEmitter<elementCB> = ...

Emitted when widget drag starts

dragStopCB

dragStopCB: EventEmitter<elementCB> = ...

Emitted when widget drag stops

droppedCB

droppedCB: EventEmitter<droppedCB> = ...

Emitted when widget is dropped

enableCB

enableCB: EventEmitter<eventCB> = ...

Emitted when grid is enabled

removedCB

removedCB: EventEmitter<nodesCB> = ...

Emitted when widgets are removed from the grid

resizeCB

resizeCB: EventEmitter<elementCB> = ...

Emitted during widget resize operations

resizeStartCB

resizeStartCB: EventEmitter<elementCB> = ...

Emitted when widget resize starts

resizeStopCB

resizeStopCB: EventEmitter<elementCB> = ...

Emitted when widget resize stops

ref

ref: undefined | ComponentRef<GridstackComponent>

Component reference for dynamic component removal. Used internally when this component is created dynamically.

`Static`componentMap

componentMap: ComponentMap = {}

Map of component keys to Angular component types used for dynamic creation. Keys default to the component's @Component.selector string when registered via registerComponents().

`Protected` `Optional`_options

_options?: GridStackOptions

`Protected` `Optional`_grid

_grid?: GridStack

`Protected`_sub

_sub: undefined | Subscription

`Protected` `Optional`loaded

loaded?: boolean

`Protected` `Readonly`elementRef

elementRef: ElementRef<GridCompHTMLElement>

Class GridstackComponent

Example

Implements

Index

Accessors

Constructors

Methods

Properties

Accessors

options

Returns GridStackOptions

Parameters

Returns void

Example

el

Returns GridCompHTMLElement

grid

Returns undefined | GridStack

Example

Constructors

constructor

Parameters

Returns GridstackComponent

Methods

StaticregisterComponents

Parameters

Returns void

Example

StaticgetSelector

Parameters

Returns string

ngOnInit

Returns void

ngAfterContentInit

Returns void

ngOnDestroy

Returns void

updateAll

Returns void

checkEmpty

Returns void

ProtectedhookEvents

Parameters

Returns void

ProtectedunhookEvents

Parameters

Returns void

Properties

OptionalgridstackItems

Optionalcontainer

OptionalisEmpty

Example

addedCB

changeCB

disableCB

dragCB

dragStartCB

dragStopCB

droppedCB

enableCB

removedCB

resizeCB

resizeStartCB

resizeStopCB

ref

StaticcomponentMap

Protected Optional_options

Protected Optional_grid

Protected_sub

Protected Optionalloaded

Protected ReadonlyelementRef

Settings

On This Page

`Static`registerComponents

`Static`getSelector

`Protected`hookEvents

`Protected`unhookEvents

`Optional`gridstackItems

`Optional`container

`Optional`isEmpty

`Static`componentMap

`Protected` `Optional`_options

`Protected` `Optional`_grid

`Protected`_sub

`Protected` `Optional`loaded

`Protected` `Readonly`elementRef