AbstractAngular component wrapper for individual GridStack items.
+Angular component wrapper for individual GridStack items.
This component represents a single grid item and handles:
Reference to child widget component for serialization. Used to save/restore additional data along with grid position.
-Protected Optional_Protected ReadonlyelementProtected Optional_Protected ReadonlyelementAngular component wrapper for GridStack.
+Angular component wrapper for GridStack.
This component provides Angular integration for GridStack grids, handling:
Protected Optional_Protected Optional_Protected_Protected OptionalloadedProtected ReadonlyelementProtected Optional_Protected Optional_Protected_Protected OptionalloadedProtected ReadonlyelementUse GridstackComponent and GridstackItemComponent as standalone components instead.
+Use GridstackComponent and GridstackItemComponent as standalone components instead.
This NgModule is provided for backward compatibility but is no longer the recommended approach. Import components directly in your standalone components or use the new Angular module structure.
// Preferred approach - standalone components
@Component({
selector: 'my-app',
imports: [GridstackComponent, GridstackItemComponent],
template: '<gridstack></gridstack>'
})
export class AppComponent {}
// Legacy approach (deprecated)
@NgModule({
imports: [GridstackModule]
})
export class AppModule {}
can be used when a new item needs to be created, which we do as a Angular component, or deleted (skip)
-can be used when a new item needs to be created, which we do as a Angular component, or deleted (skip)
+called for each item in the grid - check if additional information needs to be saved. +
called for each item in the grid - check if additional information needs to be saved. Note: since this is options minus gridstack protected members using Utils.removeInternalForSave(), this typically doesn't need to do anything. However your custom Component @Input() are now supported using BaseWidget.serialize()
-track when widgeta re updated (rather than created) to make sure we de-serialize them as well
-track when widgeta re updated (rather than created) to make sure we de-serialize them as well
+The Angular wrapper component
The Angular wrapper component
Running version can be seen here https://stackblitz.com/edit/gridstack-angular
this is the recommended way if you are going to have multiple grids (alow drag&drop between) or drag from toolbar to create items, or drag to remove items, etc...
I.E. don't use Angular templating to create grid items as that is harder to sync when gridstack will also add/remove items.
@@ -59,4 +59,4 @@Extended HTMLElement interface for grid items. +
Extended HTMLElement interface for grid items. Stores a back-reference to the Angular component for integration.
ReadonlychildReadonlychildrenReturns the child elements.
ReadonlyfirstReturns the first child that is an element, and null otherwise.
ReadonlylastReturns the last child that is an element, and null otherwise.
-ReadonlyassignedReadonlyassignedExtended HTMLElement interface for the grid container. +
Extended HTMLElement interface for the grid container. Stores a back-reference to the Angular component for integration purposes.
ReadonlychildReadonlychildrenReturns the child elements.
ReadonlyfirstReturns the first child that is an element, and null otherwise.
ReadonlylastReturns the last child that is an element, and null otherwise.
-ReadonlyassignedReadonlyassignedExtended GridStackNode interface for Angular integration. +
Extended GridStackNode interface for Angular integration. Adds component selector for dynamic content creation.
Extended GridStackOptions interface for Angular integration. +
Extended GridStackOptions interface for Angular integration. Supports Angular-specific widget definitions and nested grids.
Extended GridStackWidget interface for Angular integration. +
Extended GridStackWidget interface for Angular integration. Adds Angular-specific properties for dynamic component creation.
Mapping of selector strings to Angular component types. +
Mapping of selector strings to Angular component types. Used for dynamic component creation based on widget selectors.
-Callback for drop events with before/after node state
+Callback for drop events with before/after node state
Callback for element-specific events (resize, drag, etc.)
+Callback for events affecting multiple nodes (change, etc.)
+Type for component input data serialization. +
Type for component input data serialization. Maps @Input() property names to their values for widget persistence.
AbstractAbstract base class for all drag & drop implementations. +
AbstractAbstract base class for all drag & drop implementations. Provides common functionality for event handling, enable/disable state, and lifecycle management used by draggable, droppable, and resizable implementations.
Name of the event to trigger
DOM event object to pass to the callback
Result from the callback function, if any
-Interface for HTML elements extended with drag & drop options. +
Interface for HTML elements extended with drag & drop options. Used to associate DD configuration with DOM elements.
Method to update the options and return the DD implementation
Interface for HTML elements extended with drag & drop options. +
Interface for HTML elements extended with drag & drop options. Used to associate DD configuration with DOM elements.
Method to update the options and return the DD implementation
StaticinitStaticinitHTML Native Mouse and Touch Events Drag and Drop functionality.
+HTML Native Mouse and Touch Events Drag and Drop functionality.
This class provides the main drag & drop implementation for GridStack, handling resizing, dragging, and dropping of grid items using native HTML5 events. It manages the interaction between different DD components and the grid system.
@@ -33,4 +33,4 @@Global state manager for all Drag & Drop instances.
+Global state manager for all Drag & Drop instances.
This class maintains shared state across all drag & drop operations, ensuring proper coordination between multiple grids and drag/drop elements. All properties are static to provide global access throughout the DD system.
@@ -20,4 +20,4 @@ If set to true or a number (milliseconds), dragging placement and collision detection will only happen after the user pauses movement. This improves performance during rapid mouse movements. -Interface for HTML elements extended with drag & drop options. +
Interface for HTML elements extended with drag & drop options. Used to associate DD configuration with DOM elements.
Method to update the options and return the DD implementation
call this when resize handle needs to be removed and cleaned up
-Main gridstack class - you will need to call GridStack.init() first to initialize your grid.
+
Main gridstack class - you will need to call GridStack.init() first to initialize your grid.
Note: your grid elements MUST have the following classes for the CSS layout to work:
<div class="grid-stack">
<div class="grid-stack-item">
<div class="grid-stack-item-content">Item 1</div>
</div>
</div>
ProtectedresponseStatic Optionalsavecallback during saving to application can inject extra data for each widget, on top of the grid layout properties
Static Optionalupdatecalled after a widget has been updated (eg: load() into an existing list of children) so application can do extra work
StaticUtilsscoping so users can call GridStack.Utils.sort() for example
-Defines the GridStack engine that handles all grid layout calculations and node positioning. +
Defines the GridStack engine that handles all grid layout calculations and node positioning. This is the core engine that performs grid manipulation without any DOM operations.
The engine manages:
return true if can fit in grid height constrain only (always true if no maxRow)
Collection of utility methods used throughout GridStack. +
Collection of utility methods used throughout GridStack. These are general-purpose helper functions for DOM manipulation, positioning calculations, object operations, and more.
Defines a responsive breakpoint for automatic column count changes. +
Defines a responsive breakpoint for automatic column count changes. Used with the responsive.breakpoints option.
Drag&Drop dragging options
+Drag&Drop dragging options
OptionalstopExtended HTMLElement interface for grid items. +
Extended HTMLElement interface for grid items. All grid item DOM elements implement this interface to provide access to their grid data.
Drag&Drop remove options
+Drag&Drop remove options
OptionalautoOptionalhandlesOptionalmaxOptionalmaxOptionalmaxOptionalmaxOptionalminOptionalminOptionalresizeOptionalstartOptionalstopOptionalautoOptionalhandlesOptionalmaxOptionalmaxOptionalmaxOptionalmaxOptionalminOptionalminOptionalresizeOptionalstartOptionalstopDrag&Drop resize options
+Drag&Drop resize options
Optionalautodo resize handle hide by default until mouse over ? - default: true on desktop, false on mobile
Optionalhandlessides where you can resize from (ex: 'e, se, s, sw, w') - default 'se' (south-east) Note: it is not recommended to resize from the top sides as weird side effect may occur.
-Extended HTMLElement interface for grid items. +
Extended HTMLElement interface for grid items. All grid item DOM elements implement this interface to provide access to their grid data.
options used during creation - similar to GridStackOptions
+options used during creation - similar to GridStackOptions
options used during GridStackEngine.moveNode()
+options used during GridStackEngine.moveNode()
internal runtime descriptions describing the widgets in the grid
+internal runtime descriptions describing the widgets in the grid
Defines the options for a Grid
+Defines the options for a Grid
Optionalsubenable/disable the creation of sub-grids on the fly by dragging items completely
over others (nest) vs partially (push). Forces DDDragOpt.pause=true to accomplish that.
Optionalsublist of differences in options for automatically created sub-grids under us (inside our grid-items)
-GridStack Widget creation options
+GridStack Widget creation options
Interface for HTML elements extended with drag & drop options. +
Interface for HTML elements extended with drag & drop options. Used to associate DD configuration with DOM elements.
Method to update the options and return the DD implementation
Configuration for responsive grid behavior.
+Configuration for responsive grid behavior.
Defines how the grid responds to different screen sizes by changing column counts. NOTE: Make sure to include the appropriate CSS (gridstack-extra.css) to support responsive behavior.
Optionalcolumnmaximum number of columns allowed (default: 12). NOTE: make sure to have correct extra CSS to support this.
Optionalcolumnwanted width to maintain (+-50%) to dynamically pick a column count. NOTE: make sure to have correct extra CSS to support this.
Optionallayoutglobal re-layout mode when changing columns
-Optional callback function called during load() operations. +
Optional callback function called during load() operations. Allows custom handling of widget addition/removal for framework integration.
The parent HTML element
The widget definition
True if adding, false if removing
True if this is a grid operation
The created/modified HTML element, or undefined
-Different layout options when changing the number of columns.
+Different layout options when changing the number of columns.
These options control how widgets are repositioned when the grid column count changes. Note: The new list may be partially filled if there's a cached layout for that size.
Options:
@@ -11,4 +11,4 @@'none': Leave items unchanged unless they don't fit in the new column countOptions for the compact() method to reclaim empty space.
+Options for the compact() method to reclaim empty space.
'list': Keep items in order, move them up sequentially'compact': Find truly empty spaces, may reorder items for optimal fitCallback function type for drag & drop events.
+Callback function type for drag & drop events.
The DOM event that triggered the callback
The grid item element being dragged/dropped
Optionalhelper: GridItemHTMLElementOptional helper element used during drag operations
-Drag & Drop options for drop targets. +
Keys for DD configuration options that can be set via the 'option' command.
-Keys for DD configuration options that can be set via the 'option' command.
+Drag & Drop operation types used throughout the DD system. +
Drag & Drop operation types used throughout the DD system. Can be control commands or configuration objects.
-Values for DD configuration options (numbers or strings with units).
-Values for DD configuration options (numbers or strings with units).
+Type for event callback functions used in drag & drop operations. +
Type for event callback functions used in drag & drop operations. Can return boolean to indicate if the event should continue propagation.
-Drop event handler that receives previous and new node states
-Drop event handler that receives previous and new node states
+Type representing various ways to specify grid elements. +
Type representing various ways to specify grid elements. Can be a CSS selector string, HTMLElement, or GridItemHTMLElement.
-Element-specific event handler that receives event and affected element
-Element-specific event handler that receives event and affected element
+list of possible events, or space separated list of them
-list of possible events, or space separated list of them
+General event handler that receives only the event
-General event handler that receives only the event
+Union type of all possible event handler types
-Union type of all possible event handler types
+Node-based event handler that receives event and array of affected nodes
-Node-based event handler that receives event and array of affected nodes
+Optional callback function for custom widget content rendering. +
Optional callback function for custom widget content rendering. Called during load()/addWidget() to create custom content beyond plain text.
The widget's content container element
The widget definition with content and other properties
-Optional callback function for custom resize-to-content behavior. +
Optional callback function for custom resize-to-content behavior. Called when a widget needs to resize to fit its content.
The grid item element to resize
-Optional callback function called during save() operations. +
Optional callback function called during save() operations. Allows adding custom data to the saved widget structure.
The internal grid node
The widget structure being saved (can be modified)
-Type representing values that can be either numbers or strings (e.g., dimensions with units). +
Type representing values that can be either numbers or strings (e.g., dimensions with units). Used for properties like width, height, margins that accept both numeric and string values.
-ConstDefault values for grid options - used during initialization and when saving out grid configuration. +
ConstDefault values for grid options - used during initialization and when saving out grid configuration. These values are applied when options are not explicitly provided.
-
Base widget class for GridStack Angular integration.
+Class BaseWidget
AbstractBase widget class for GridStack Angular integration.
Index
Constructors
Methods
Properties
OptionalwidgetComplete widget definition including position, size, and Angular-specific data. Populated automatically when the widget is loaded or saved.
-Settings
On This Page
Constructors
Methods
Properties