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

Accessors

options

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

Returns GridStackOptions
- Defined in angular/projects/lib/src/lib/gridstack.component.ts:120
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:112

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:190

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:201

Constructors

constructor

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

Methods

`Static`addComponentToSelectorType

addComponentToSelectorType(typeList: Type<Object>[]): void
Register a list of Angular components for dynamic creation.
Parameters
- typeList: Type<Object>[]
  Array of component types to register
Returns void
Example
```
GridstackComponent.addComponentToSelectorType([
  MyWidgetComponent,
  AnotherWidgetComponent
]);
```
- Defined in angular/projects/lib/src/lib/gridstack.component.ts:234

`Static`getSelector

getSelector(type: Type<Object>): string
Extract the selector string from an Angular component type.
Parameters
- type: Type<Object>
  The component type to get selector from
Returns string
The component's selector string
- Defined in angular/projects/lib/src/lib/gridstack.component.ts:243

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:266

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:276

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:284

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:298

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:309

`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:315

`Protected`unhookEvents

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

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`selectorToType

selectorToType: SelectorToType = {}

Mapping of component selectors to their types for dynamic creation.

This enables dynamic component instantiation from string selectors. Angular doesn't provide public access to this mapping, so we maintain our own.

Example

GridstackComponent.addComponentToSelectorType([MyWidgetComponent]);

`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

StaticaddComponentToSelectorType

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

StaticselectorToType

Example

Protected Optional_options

Protected Optional_grid

Protected_sub

Protected Optionalloaded

Protected ReadonlyelementRef

Settings

On This Page

`Static`addComponentToSelectorType

`Static`getSelector

`Protected`hookEvents

`Protected`unhookEvents

`Optional`gridstackItems

`Optional`container

`Optional`isEmpty

`Static`selectorToType

`Protected` `Optional`_options

`Protected` `Optional`_grid

`Protected`_sub

`Protected` `Optional`loaded

`Protected` `Readonly`elementRef