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.
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