new updateOptions()

* new `updateOptions(o: GridStackOptions)` to update PARTIAL list of options after grid as been created

Author: adumesny

angular/projects/lib/src/lib/gridstack-item.component.ts

@@ -19,11 +19,11 @@ export interface GridItemCompHTMLElement extends GridItemHTMLElement {
   selector: 'gridstack-item',
   template: `
     <div class="grid-stack-item-content">
-      <!-- where dynamic items go based on component types, or sub-grids, etc...) -->
+      <!-- where dynamic items go based on component selector (recommended way), or sub-grids, etc...) -->
       <ng-template #container></ng-template>
-      <!-- any static (defined in dom) content goes here -->
+      <!-- any static (defined in DOM - not recommended) content goes here -->
       <ng-content></ng-content>
-      <!-- fallback HTML content from GridStackWidget content field if used instead -->
+      <!-- fallback HTML content from GridStackWidget.content if used instead (not recommended) -->
       {{options.content}}
     </div>`,
   styles: [`

angular/projects/lib/src/lib/gridstack.component.ts

@@ -49,13 +49,19 @@ export type SelectorToType = {[key: string]: Type<Object>};
 })
 export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
 
-  /** track list of TEMPLATE grid items so we can sync between DOM and GS internals */
+  /** track list of TEMPLATE (not recommended) grid items so we can sync between DOM and GS internals */
   @ContentChildren(GridstackItemComponent) public gridstackItems?: QueryList<GridstackItemComponent>;
-  /** container to append items dynamically */
+  /** container to append items dynamically (recommended way) */
   @ViewChild('container', { read: ViewContainerRef, static: true}) public container?: ViewContainerRef;
 
   /** initial options for creation of the grid */
-  @Input() public set options(val: GridStackOptions) { this._options = val; }
+  @Input() public set options(o: GridStackOptions) {
+    if (this._grid) {
+      // this._grid.updateOptions(o); // new API
+    } else {
+      this._options = o;
+    }
+  }
   /** return the current running options */
   public get options(): GridStackOptions { return this._grid?.opts || this._options || {}; }
 
@@ -110,11 +116,7 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
   protected _sub: Subscription | undefined;
   protected loaded?: boolean;
 
-  constructor(
-    // protected readonly zone: NgZone,
-    // protected readonly cd: ChangeDetectorRef,
-    protected readonly elementRef: ElementRef<GridCompHTMLElement>,
-  ) {
+  constructor(protected readonly elementRef: ElementRef<GridCompHTMLElement>) {
     // set globally our method to create the right widget type
     if (!GridStack.addRemoveCB) {
       GridStack.addRemoveCB = gsCreateNgComponents;
@@ -154,7 +156,7 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
   }
 
   /**
-   * called when the TEMPLATE list of items changes - get a list of nodes and
+   * 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)
    */
   public updateAll() {
@@ -170,10 +172,7 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
   /** check if the grid is empty, if so show alternative content */
   public checkEmpty() {
     if (!this.grid) return;
-    const isEmpty = !this.grid.engine.nodes.length;
-    if (isEmpty === this.isEmpty) return;
-    this.isEmpty = isEmpty;
-    // this.cd.detectChanges();
+    this.isEmpty = !this.grid.engine.nodes.length;
   }
 
   /** get all known events as easy to use Outputs for convenience */

doc/CHANGES.md

@@ -123,7 +123,10 @@ Change log
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
 ## 11.4.0-dev (TBD)
-* feat: [#2960](https://github.com/gridstack/gridstack.js/pull/2960) `prepareDragDrop(el, force)` option to force re-creation of the drag&drop event binding
+* feat: [#2975](https://github.com/gridstack/gridstack.js/pull/2975) `prepareDragDrop(el, force)` option to force re-creation of the drag&drop event binding
+* feat: [#2989](https://github.com/gridstack/gridstack.js/pull/2989) new `updateOptions(o: GridStackOptions)` to update PARTIAL list of options after grid as been created
+* fix: [#2980](https://github.com/gridstack/gridstack.js/issues/2980) dd-touch circular dependency
+* fix: [#2667](https://github.com/gridstack/gridstack.js/issues/2667) sidebar items not honoring gs-w (enter-leave-re-enter)
 
 ## 11.4.0 (2025-02-27)
 * fix: [#2921](https://github.com/gridstack/gridstack.js/pull/2921) replace initMouseEvent with MouseEvent constructor and added composed: true

spec/gridstack-spec.ts

@@ -2002,4 +2002,34 @@ describe('gridstack >', function() {
       expect(window.getComputedStyle(grid.el.querySelector("#item1")!).height).toBe("60px");
     });
   });
+
+  
+  describe('updateOptions()', function() {
+    let grid: GridStack;
+    beforeEach(function() {
+      document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
+      grid = GridStack.init({ cellHeight: 30 });
+    });
+    afterEach(function() {
+      document.body.removeChild(document.getElementById('gs-cont'));
+    });
+    it('update all values supported', function() {
+      grid.updateOptions({
+        cellHeight: '40px',
+        margin: 8,
+        column: 11,
+        float: true, 
+        row: 10,
+      });
+      expect(grid.getCellHeight(true)).toBe(40);
+      expect(grid.getMargin()).toBe(8);
+      expect(grid.opts.marginTop).toBe(8);
+      expect(grid.getColumn()).toBe(11);
+      expect(grid.getFloat()).toBe(true);
+      expect(grid.opts.row).toBe(10);
+      expect(grid.opts.minRow).toBe(10);
+      expect(grid.opts.maxRow).toBe(10);
+    });
+  });
+
 });

src/gridstack.ts

@@ -1305,6 +1305,32 @@ export class GridStack {
     return this;
   }
 
+  /**
+   * Updates the passed in options on the grid (similar to update(widget) for for the grid options).
+   * @param options PARTIAL grid options to update - only items specified will be updated.
+   * NOTE: not all options updating are currently supported (lot of code, unlikely to change)
+   */
+  public updateOptions(o: GridStackOptions): GridStack {
+    const opts = this.opts;
+    if (o.acceptWidgets !== undefined) this._setupAcceptWidget();
+    if (o.animate !== undefined) this.setAnimation();
+    if (o.cellHeight) { this.cellHeight(o.cellHeight, true); delete o.cellHeight; }
+    if (o.class && o.class !== opts.class) { if (opts.class) this.el.classList.remove(opts.class); this.el.classList.add(o.class); }
+    if (typeof(o.column) === 'number' && !o.columnOpts) { this.column(o.column); delete o.column; }// responsive column take over actual count
+    if (o.margin !== undefined) this.margin(o.margin);
+    if (o.staticGrid !== undefined) this.setStatic(o.staticGrid);
+    if (o.disableDrag !== undefined && !o.staticGrid) this.enableMove(!o.disableDrag);
+    if (o.disableResize !== undefined && !o.staticGrid) this.enableResize(!o.disableResize);
+    if (o.float !== undefined) this.float(o.float);
+    if (o.row !== undefined) { opts.minRow = opts.maxRow = o.row; }
+    if (o.children?.length) { this.load(o.children); delete o.children; }
+    // TBD if we have a real need for these (more complex code)
+    // alwaysShowResizeHandle, draggable, handle, handleClass, itemClass, layout, placeholderClass, placeholderText, resizable, removable, row,...
+    // rest are just copied over...
+    this.opts = {...this.opts, ...o};
+    return this;
+  }
+
   /**
    * Updates widget position/size and other info. Note: if you need to call this on all nodes, use load() instead which will update what changed.
    * @param els  widget or selector of objects to modify (note: setting the same x,y for multiple items will be indeterministic and likely unwanted)
@@ -2418,12 +2444,13 @@ export class GridStack {
   }
 
   /**
-   * prepares the element for drag&drop - this is normally called by makeWiget() unless are are delay loading
+   * prepares the element for drag&drop - this is normally called by makeWidget() unless are are delay loading
    * @param el GridItemHTMLElement of the widget
-   * @param [force=false] 
+   * @param [force=false]
    * */
   public prepareDragDrop(el: GridItemHTMLElement, force = false): GridStack {
-    const node = el.gridstackNode;
+    const node = el?.gridstackNode;
+    if (!node) return;
     const noMove = node.noMove || this.opts.disableDrag;
     const noResize = node.noResize || this.opts.disableResize;