Defined in: angular/projects/lib/src/lib/gridstack.component.ts:85

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.

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

• OnInit
• AfterContentInit
• OnDestroy

get options(): GridStackOptions;

Defined in: angular/projects/lib/src/lib/gridstack.component.ts:120

Get the current running grid options

GridStackOptions

set options(o): void;

Defined in: angular/projects/lib/src/lib/gridstack.component.ts:112

Grid configuration options. Can be set before grid initialization or updated after grid is created.

gridOptions: GridStackOptions = {
  column: 12,
  cellHeight: 'auto',
  animate: true
};

void

get el(): GridCompHTMLElement;

Defined in: angular/projects/lib/src/lib/gridstack.component.ts:190

Get the native DOM element that contains grid-specific fields. This element has GridStack properties attached to it.

GridCompHTMLElement

get grid(): undefined | GridStack;

Defined in: angular/projects/lib/src/lib/gridstack.component.ts:201

Get the underlying GridStack instance. Use this to access GridStack API methods directly.

this.gridComponent.grid.addWidget({x: 0, y: 0, w: 2, h: 1});

undefined | GridStack

new GridstackComponent(elementRef): GridstackComponent;

Defined in: angular/projects/lib/src/lib/gridstack.component.ts:253

GridstackComponent

static addComponentToSelectorType(typeList): void;

Defined in: angular/projects/lib/src/lib/gridstack.component.ts:234

Register a list of Angular components for dynamic creation.

void

GridstackComponent.addComponentToSelectorType([
  MyWidgetComponent,
  AnotherWidgetComponent
]);

static getSelector(type): string;

Defined in: angular/projects/lib/src/lib/gridstack.component.ts:243

Extract the selector string from an Angular component type.

string

The component's selector string

ngOnInit(): void;

Defined in: angular/projects/lib/src/lib/gridstack.component.ts:267

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.

void

OnInit.ngOnInit

ngAfterContentInit(): void;

Defined in: angular/projects/lib/src/lib/gridstack.component.ts:277

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

void

AfterContentInit.ngAfterContentInit

ngOnDestroy(): void;

Defined in: angular/projects/lib/src/lib/gridstack.component.ts:285

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

void

OnDestroy.ngOnDestroy

updateAll(): void;

Defined in: angular/projects/lib/src/lib/gridstack.component.ts:299

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)

void

checkEmpty(): void;

Defined in: angular/projects/lib/src/lib/gridstack.component.ts:310

check if the grid is empty, if so show alternative content

void

protected hookEvents(grid?): void;

Defined in: angular/projects/lib/src/lib/gridstack.component.ts:316

get all known events as easy to use Outputs for convenience

void

protected unhookEvents(grid?): void;

Defined in: angular/projects/lib/src/lib/gridstack.component.ts:343

void

Defined in: angular/projects/lib/src/lib/gridstack.component.ts:39

Extended HTMLElement interface for the grid container. Stores a back-reference to the Angular component for integration purposes.

• GridHTMLElement

animate(keyframes, options?): Animation;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:2146

Animation

GridHTMLElement.animate

getAnimations(options?): Animation[];

Defined in: node_modules/typescript/lib/lib.dom.d.ts:2147

Animation[]

GridHTMLElement.getAnimations

after(...nodes): void;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:3747

Inserts nodes just after node, while replacing strings in nodes with equivalent Text nodes.

Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated.

void

GridHTMLElement.after

before(...nodes): void;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:3753

Inserts nodes just before node, while replacing strings in nodes with equivalent Text nodes.

Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated.

void

GridHTMLElement.before

remove(): void;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:3755

Removes node.

void

GridHTMLElement.remove

replaceWith(...nodes): void;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:3761

Replaces node with nodes, while replacing strings in nodes with equivalent Text nodes.

Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated.

void

GridHTMLElement.replaceWith

attachShadow(init): ShadowRoot;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5074

Creates a shadow root for element and returns it.

ShadowRoot

GridHTMLElement.attachShadow

checkVisibility(options?): boolean;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5075

boolean

GridHTMLElement.checkVisibility

closest<K>(selector): null | HTMLElementTagNameMap[K];

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5077

Returns the first (starting at element) inclusive ancestor that matches selectors, and null otherwise.

null | HTMLElementTagNameMap[K]

GridHTMLElement.closest

closest<K>(selector): null | SVGElementTagNameMap[K];

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5078

null | SVGElementTagNameMap[K]

GridHTMLElement.closest

closest<K>(selector): null | MathMLElementTagNameMap[K];

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5079

null | MathMLElementTagNameMap[K]

GridHTMLElement.closest

closest<E>(selectors): null | E;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5080

null | E

GridHTMLElement.closest

getAttribute(qualifiedName): null | string;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5082

Returns element's first attribute whose qualified name is qualifiedName, and null if there is no such attribute otherwise.

null | string

GridHTMLElement.getAttribute

getAttributeNS(namespace, localName): null | string;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5084

Returns element's attribute whose namespace is namespace and local name is localName, and null if there is no such attribute otherwise.

null | string

GridHTMLElement.getAttributeNS

getAttributeNames(): string[];

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5086

Returns the qualified names of all element's attributes. Can contain duplicates.

string[]

GridHTMLElement.getAttributeNames

getAttributeNode(qualifiedName): null | Attr;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5087

null | Attr

GridHTMLElement.getAttributeNode

getAttributeNodeNS(namespace, localName): null | Attr;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5088

null | Attr

GridHTMLElement.getAttributeNodeNS

getBoundingClientRect(): DOMRect;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5089

DOMRect

GridHTMLElement.getBoundingClientRect

getClientRects(): DOMRectList;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5090

DOMRectList

GridHTMLElement.getClientRects

getElementsByClassName(classNames): HTMLCollectionOf<Element>;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5092

Returns a HTMLCollection of the elements in the object on which the method was invoked (a document or an element) that have all the classes given by classNames. The classNames argument is interpreted as a space-separated list of classes.

HTMLCollectionOf<Element>

GridHTMLElement.getElementsByClassName

getElementsByTagName<K>(qualifiedName): HTMLCollectionOf<HTMLElementTagNameMap[K]>;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5093

HTMLCollectionOf<HTMLElementTagNameMap[K]>

GridHTMLElement.getElementsByTagName

getElementsByTagName<K>(qualifiedName): HTMLCollectionOf<SVGElementTagNameMap[K]>;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5094

HTMLCollectionOf<SVGElementTagNameMap[K]>

GridHTMLElement.getElementsByTagName

getElementsByTagName<K>(qualifiedName): HTMLCollectionOf<MathMLElementTagNameMap[K]>;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5095

HTMLCollectionOf<MathMLElementTagNameMap[K]>

GridHTMLElement.getElementsByTagName

getElementsByTagName<K>(qualifiedName): HTMLCollectionOf<HTMLElementDeprecatedTagNameMap[K]>;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5097

HTMLCollectionOf<HTMLElementDeprecatedTagNameMap[K]>

GridHTMLElement.getElementsByTagName

getElementsByTagName(qualifiedName): HTMLCollectionOf<Element>;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5098

HTMLCollectionOf<Element>

GridHTMLElement.getElementsByTagName

getElementsByTagNameNS(namespaceURI, localName): HTMLCollectionOf<HTMLElement>;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5099

HTMLCollectionOf<HTMLElement>

GridHTMLElement.getElementsByTagNameNS

getElementsByTagNameNS(namespaceURI, localName): HTMLCollectionOf<SVGElement>;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5100

HTMLCollectionOf<SVGElement>

GridHTMLElement.getElementsByTagNameNS

getElementsByTagNameNS(namespaceURI, localName): HTMLCollectionOf<MathMLElement>;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5101

HTMLCollectionOf<MathMLElement>

GridHTMLElement.getElementsByTagNameNS

getElementsByTagNameNS(namespace, localName): HTMLCollectionOf<Element>;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5102

HTMLCollectionOf<Element>

GridHTMLElement.getElementsByTagNameNS

hasAttribute(qualifiedName): boolean;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5104

Returns true if element has an attribute whose qualified name is qualifiedName, and false otherwise.

boolean

GridHTMLElement.hasAttribute

hasAttributeNS(namespace, localName): boolean;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5106

Returns true if element has an attribute whose namespace is namespace and local name is localName.

boolean

GridHTMLElement.hasAttributeNS

hasAttributes(): boolean;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5108

Returns true if element has attributes, and false otherwise.

boolean

GridHTMLElement.hasAttributes

hasPointerCapture(pointerId): boolean;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5109

boolean

GridHTMLElement.hasPointerCapture

insertAdjacentElement(where, element): null | Element;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5110

null | Element

GridHTMLElement.insertAdjacentElement

insertAdjacentHTML(position, text): void;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5111

void

GridHTMLElement.insertAdjacentHTML

insertAdjacentText(where, data): void;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5112

void

GridHTMLElement.insertAdjacentText

matches(selectors): boolean;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5114

Returns true if matching selectors against element's root yields element, and false otherwise.

boolean

GridHTMLElement.matches

releasePointerCapture(pointerId): void;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5115

void

GridHTMLElement.releasePointerCapture

removeAttribute(qualifiedName): void;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5117

Removes element's first attribute whose qualified name is qualifiedName.

void

GridHTMLElement.removeAttribute

removeAttributeNS(namespace, localName): void;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5119

Removes element's attribute whose namespace is namespace and local name is localName.

void

GridHTMLElement.removeAttributeNS

removeAttributeNode(attr): Attr;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5120

Attr

GridHTMLElement.removeAttributeNode

requestFullscreen(options?): Promise<void>;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5126

Displays element fullscreen and resolves promise when done.

When supplied, options's navigationUI member indicates whether showing navigation UI while in fullscreen is preferred or not. If set to "show", navigation simplicity is preferred over screen space, and if set to "hide", more screen space is preferred. User agents are always free to honor user preference over the application's. The default value "auto" indicates no application preference.

Promise<void>

GridHTMLElement.requestFullscreen

requestPointerLock(): void;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5127

void

GridHTMLElement.requestPointerLock

scroll(options?): void;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5128

void

GridHTMLElement.scroll

scroll(x, y): void;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5129

void

GridHTMLElement.scroll

scrollBy(options?): void;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5130

void

GridHTMLElement.scrollBy

scrollBy(x, y): void;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5131

void

GridHTMLElement.scrollBy

scrollIntoView(arg?): void;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5132

void

GridHTMLElement.scrollIntoView

scrollTo(options?): void;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5133

void

GridHTMLElement.scrollTo

scrollTo(x, y): void;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5134

void

GridHTMLElement.scrollTo

setAttribute(qualifiedName, value): void;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5136

Sets the value of element's first attribute whose qualified name is qualifiedName to value.

void

GridHTMLElement.setAttribute

setAttributeNS(
   namespace, 
   qualifiedName, 
   value): void;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5138

Sets the value of element's attribute whose namespace is namespace and local name is localName to value.

void

GridHTMLElement.setAttributeNS

setAttributeNode(attr): null | Attr;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5139

null | Attr

GridHTMLElement.setAttributeNode

setAttributeNodeNS(attr): null | Attr;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5140

null | Attr

GridHTMLElement.setAttributeNodeNS

setPointerCapture(pointerId): void;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5141

void

GridHTMLElement.setPointerCapture

toggleAttribute(qualifiedName, force?): boolean;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5147

If force is not given, "toggles" qualifiedName, removing it if it is present and adding it if it is not present. If force is true, adds qualifiedName. If force is false, removes qualifiedName.

Returns true if qualifiedName is now present, and false otherwise.

boolean

GridHTMLElement.toggleAttribute

webkitMatchesSelector(selectors): boolean;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5149

boolean

This is a legacy alias of matches.

GridHTMLElement.webkitMatchesSelector

dispatchEvent(event): boolean;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:5344

Dispatches a synthetic event event to target and returns true if either event's cancelable attribute value is false or its preventDefault() method was not invoked, and false otherwise.

boolean

GridHTMLElement.dispatchEvent

attachInternals(): ElementInternals;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:6573

ElementInternals

GridHTMLElement.attachInternals

click(): void;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:6574

void

GridHTMLElement.click

addEventListener<K>(
   type, 
   listener, 
   options?): void;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:6575

void

GridHTMLElement.addEventListener

addEventListener(
   type, 
   listener, 
   options?): void;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:6576

void

GridHTMLElement.addEventListener

removeEventListener<K>(
   type, 
   listener, 
   options?): void;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:6577

void

GridHTMLElement.removeEventListener

removeEventListener(
   type, 
   listener, 
   options?): void;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:6578

void

GridHTMLElement.removeEventListener

blur(): void;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:7768

void

GridHTMLElement.blur

focus(options?): void;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:7769

void

GridHTMLElement.focus

appendChild<T>(node): T;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:10274

T

GridHTMLElement.appendChild

cloneNode(deep?): Node;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:10276

Returns a copy of node. If deep is true, the copy also includes the node's descendants.

Node

GridHTMLElement.cloneNode

compareDocumentPosition(other): number;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:10278

Returns a bitmask indicating the position of other relative to node.

number

GridHTMLElement.compareDocumentPosition

contains(other): boolean;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:10280

Returns true if other is an inclusive descendant of node, and false otherwise.

boolean

GridHTMLElement.contains

getRootNode(options?): Node;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:10282

Returns node's root.

Node

GridHTMLElement.getRootNode

hasChildNodes(): boolean;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:10284

Returns whether node has children.

boolean

GridHTMLElement.hasChildNodes

insertBefore<T>(node, child): T;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:10285

T

GridHTMLElement.insertBefore

isDefaultNamespace(namespace): boolean;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:10286

boolean

GridHTMLElement.isDefaultNamespace

isEqualNode(otherNode): boolean;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:10288

Returns whether node and otherNode have the same properties.

boolean

GridHTMLElement.isEqualNode

isSameNode(otherNode): boolean;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:10289

boolean

GridHTMLElement.isSameNode

lookupNamespaceURI(prefix): null | string;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:10290

null | string

GridHTMLElement.lookupNamespaceURI

lookupPrefix(namespace): null | string;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:10291

null | string

GridHTMLElement.lookupPrefix

normalize(): void;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:10293

Removes empty exclusive Text nodes and concatenates the data of remaining contiguous exclusive Text nodes into the first of their nodes.

void

GridHTMLElement.normalize

removeChild<T>(child): T;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:10294

T

GridHTMLElement.removeChild

replaceChild<T>(node, child): T;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:10295

T

GridHTMLElement.replaceChild

append(...nodes): void;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:10697

Inserts nodes after the last child of node, while replacing strings in nodes with equivalent Text nodes.

Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated.

void

GridHTMLElement.append

prepend(...nodes): void;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:10703

Inserts nodes before the first child of node, while replacing strings in nodes with equivalent Text nodes.

Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated.

void

GridHTMLElement.prepend

querySelector<K>(selectors): null | HTMLElementTagNameMap[K];

Defined in: node_modules/typescript/lib/lib.dom.d.ts:10705

Returns the first element that is a descendant of node that matches selectors.

null | HTMLElementTagNameMap[K]

GridHTMLElement.querySelector

querySelector<K>(selectors): null | SVGElementTagNameMap[K];

Defined in: node_modules/typescript/lib/lib.dom.d.ts:10706

null | SVGElementTagNameMap[K]

GridHTMLElement.querySelector

querySelector<K>(selectors): null | MathMLElementTagNameMap[K];

Defined in: node_modules/typescript/lib/lib.dom.d.ts:10707

null | MathMLElementTagNameMap[K]

GridHTMLElement.querySelector

querySelector<K>(selectors): null | HTMLElementDeprecatedTagNameMap[K];

Defined in: node_modules/typescript/lib/lib.dom.d.ts:10709

null | HTMLElementDeprecatedTagNameMap[K]

GridHTMLElement.querySelector

querySelector<E>(selectors): null | E;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:10710

null | E

GridHTMLElement.querySelector

querySelectorAll<K>(selectors): NodeListOf<HTMLElementTagNameMap[K]>;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:10712

Returns all element descendants of node that match selectors.

NodeListOf<HTMLElementTagNameMap[K]>

GridHTMLElement.querySelectorAll

querySelectorAll<K>(selectors): NodeListOf<SVGElementTagNameMap[K]>;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:10713

NodeListOf<SVGElementTagNameMap[K]>

GridHTMLElement.querySelectorAll

querySelectorAll<K>(selectors): NodeListOf<MathMLElementTagNameMap[K]>;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:10714

NodeListOf<MathMLElementTagNameMap[K]>

GridHTMLElement.querySelectorAll

querySelectorAll<K>(selectors): NodeListOf<HTMLElementDeprecatedTagNameMap[K]>;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:10716

NodeListOf<HTMLElementDeprecatedTagNameMap[K]>

GridHTMLElement.querySelectorAll

querySelectorAll<E>(selectors): NodeListOf<E>;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:10717

NodeListOf<E>

GridHTMLElement.querySelectorAll

replaceChildren(...nodes): void;

Defined in: node_modules/typescript/lib/lib.dom.d.ts:10723

Replace all children of node with nodes, while replacing strings in nodes with equivalent Text nodes.

Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated.

void

GridHTMLElement.replaceChildren