angular support for nested Grid components

* modified Ng exmaple to show a component that contains a sub-grid (in addition to being a sub-grid example)
* fixed GS code to support sub-grids that are not direct children on a grid-item-content but further down
* also hange to protected for easier subclassing

Note: this will depend on upcoming V11

Author: adumesny

angular/projects/demo/src/app/app.component.html

@@ -64,6 +64,10 @@
   <button (click)="saveGrid()">Save</button>
   <button (click)="clearGrid()">Clear</button>
   <button (click)="loadGrid()">Load</button>
+  <!-- add .grid-stack-item for acceptWidgets:true -->
+  <div class="sidebar-item grid-stack-item">Drag nested</div>
+  <div class="sidebar-item grid-stack-item">Comp N nested</div>
+
   <!-- TODO: addGrid() in code for testing instead ? -->
   <gridstack [options]="nestedGridOptions" (changeCB)="onChange($event)" (resizeStopCB)="onResizeStop($event)">
     <div empty-content>Add items here or reload the grid</div>

angular/projects/demo/src/app/app.component.ts

@@ -4,7 +4,7 @@ import { AngularSimpleComponent } from './simple';
 import { AngularNgForTestComponent } from './ngFor';
 import { AngularNgForCmdTestComponent } from './ngFor_cmd';
 
-// NOTE: local testing of file
+// TEST: local testing of file
 // import { GridstackComponent, NgGridStackOptions, NgGridStackWidget, elementCB, gsCreateNgComponents, nodesCB } from './gridstack.component';
 import { GridstackComponent, NgGridStackOptions, NgGridStackWidget, elementCB, gsCreateNgComponents, nodesCB } from 'gridstack/dist/angular';
 
@@ -46,12 +46,6 @@ export class AppComponent implements OnInit {
     children: this.sub0,
   }
 
-  // sidebar content to create storing the Widget description to be used on drop
-  public sidebarContent: NgGridStackWidget[] = [
-    {selector: 'app-a'},
-    {selector: 'app-b', w:2, maxW: 3},
-  ];
-
   // nested grid options
   private subOptions: GridStackOptions = {
     cellHeight: 50, // should be 50 - top/bottom
@@ -61,17 +55,20 @@ export class AppComponent implements OnInit {
   };
   public sub1: NgGridStackWidget[] = [ {x:0, y:0, selector:'app-a'}, {x:1, y:0, selector:'app-b'}, {x:2, y:0, selector:'app-c'}, {x:3, y:0}, {x:0, y:1}, {x:1, y:1}];
   public sub2: NgGridStackWidget[] = [ {x:0, y:0}, {x:0, y:1, w:2}];
+  public sub3: NgGridStackWidget = { selector: 'app-n', w:2, h:2, subGridOpts: { children: [{selector: 'app-a'}, {selector: 'app-b', y:0, x:1}]}};
   private subChildren: NgGridStackWidget[] = [
     {x:0, y:0, content: 'regular item'},
-    {x:1, y:0, w:4, h:4, subGridOpts: {children: this.sub1, class: 'sub1', ...this.subOptions}},
-    {x:5, y:0, w:3, h:4, subGridOpts: {children: this.sub2, class: 'sub2', ...this.subOptions}},
+    {x:1, y:0, w:4, h:4, subGridOpts: {children: this.sub1}},
+    // {x:5, y:0, w:3, h:4, subGridOpts: {children: this.sub2}},
+    this.sub3,
   ]
   public nestedGridOptions: NgGridStackOptions = { // main grid options
     cellHeight: 50,
     margin: 5,
     minRow: 2, // don't collapse when empty
     acceptWidgets: true,
-    children: this.subChildren
+    subGridOpts: this.subOptions, // all sub grids will default to those
+    children: this.subChildren,
   };
   public twoGridOpt1: NgGridStackOptions = {
     column: 6,
@@ -91,11 +88,20 @@ export class AppComponent implements OnInit {
   public twoGridOpt2: NgGridStackOptions = { ...this.twoGridOpt1, float: false }
   private serializedData?: NgGridStackOptions;
 
+  // sidebar content to create storing the Widget description to be used on drop
+  public sidebarContent6: NgGridStackWidget[] = [
+    { w:2, h:2, subGridOpts: { children: [{content: 'nest 1'}, {content: 'nest 2'}]}},
+    this.sub3,
+  ];
+  public sidebarContent7: NgGridStackWidget[] = [
+    {selector: 'app-a'},
+    {selector: 'app-b', w:2, maxW: 3},
+  ];
+
   constructor() {
     // give them content and unique id to make sure we track them during changes below...
     [...this.items, ...this.subChildren, ...this.sub1, ...this.sub2, ...this.sub0].forEach((w: NgGridStackWidget) => {
-      if (!w.selector && !w.content && !w.subGridOpts) w.content = `item ${ids}`;
-      w.id = String(ids++);
+      if (!w.selector && !w.content && !w.subGridOpts) w.content = `item ${ids++}`;
     });
   }
 
@@ -132,9 +138,11 @@ export class AppComponent implements OnInit {
         case 3: data = this.gridComp?.grid?.save(true, true); break;
         case 4: data = this.items; break;
         case 5: data = this.gridOptionsFull; break;
-        case 6: data = this.nestedGridOptions; break;
+        case 6: data = this.nestedGridOptions;
+          GridStack.setupDragIn('.sidebar-item', undefined, this.sidebarContent6);
+          break;
         case 7: data = this.twoGridOpt1;
-          GridStack.setupDragIn('.sidebar>.grid-stack-item', undefined, this.sidebarContent);
+          GridStack.setupDragIn('.sidebar-item', undefined, this.sidebarContent7);
           break;
       }
       if (this.origTextEl) this.origTextEl.nativeElement.value = JSON.stringify(data, null, '  ');

angular/projects/demo/src/app/app.module.ts

@@ -5,9 +5,9 @@ import { AppComponent } from './app.component';
 import { AngularNgForTestComponent } from './ngFor';
 import { AngularNgForCmdTestComponent } from './ngFor_cmd';
 import { AngularSimpleComponent } from './simple';
-import { AComponent, BComponent, CComponent } from './dummy.component';
+import { AComponent, BComponent, CComponent, NComponent } from './dummy.component';
 
-// local testing
+// TEST local testing
 // import { GridstackModule } from './gridstack.module';
 // import { GridstackComponent } from './gridstack.component';
 import { GridstackModule, GridstackComponent } from 'gridstack/dist/angular';
@@ -25,6 +25,7 @@ import { GridstackModule, GridstackComponent } from 'gridstack/dist/angular';
     AComponent,
     BComponent,
     CComponent,
+    NComponent,
   ],
   exports: [
   ],
@@ -34,6 +35,6 @@ import { GridstackModule, GridstackComponent } from 'gridstack/dist/angular';
 export class AppModule {
   constructor() {
     // register all our dynamic components created in the grid
-    GridstackComponent.addComponentToSelectorType([AComponent, BComponent, CComponent]);
+    GridstackComponent.addComponentToSelectorType([AComponent, BComponent, CComponent, NComponent]);
   }
 }

angular/projects/demo/src/app/dummy.component.ts

@@ -5,9 +5,9 @@
 
 // dummy testing component that will be grid items content
 
-import { Component, OnDestroy, Input } from '@angular/core';
+import { Component, OnDestroy, Input, ViewChild, ViewContainerRef } from '@angular/core';
 
-// local testing
+// TEST local testing
 // import { BaseWidget } from './base-widget';
 // import { NgCompInputs } from './gridstack.component';
 import { BaseWidget, NgCompInputs } from 'gridstack/dist/angular';
@@ -37,3 +37,22 @@ export class BComponent extends BaseWidget implements OnDestroy {
 export class CComponent extends BaseWidget implements OnDestroy {
   ngOnDestroy() { console.log('Comp C destroyed'); }
 }
+
+/** Component that host a sub-grid as a child with controls above/below it. */
+@Component({
+  selector: 'app-n',
+  template: `
+  <div>Comp N</div>
+  <ng-template #container></ng-template>
+  `,
+  /** make the subgrid take entire remaining space even when empty (so you can drag back inside without forcing 1 row) */
+  styles: [`
+    :host { height: 100%; display: flex; flex-direction: column; }
+    ::ng-deep .grid-stack.grid-stack-nested { flex: 1; }
+  `],
+})
+export class NComponent extends BaseWidget implements OnDestroy {
+  /** this is where the dynamic nested grid will be hosted. gsCreateNgComponents() looks for 'container' like GridstackItemComponent */
+  @ViewChild('container', { read: ViewContainerRef, static: true}) public container?: ViewContainerRef;
+  ngOnDestroy() { console.log('Comp N destroyed'); }
+}

angular/projects/demo/src/styles.css

@@ -63,7 +63,8 @@ h1 {
 }
 .grid-stack.grid-stack-nested {
   background: none;
-  /* background-color: red; */
+}
+.grid-stack-item-content>.grid-stack.grid-stack-nested {
   /* take entire space */
   position: absolute;
   inset: 0; /* TODO change top: if you have content in nested grid */

angular/projects/lib/src/lib/base-widget.ts

@@ -12,6 +12,10 @@ import { NgCompInputs, NgGridStackWidget } from './gridstack.component';
 
  @Injectable()
  export abstract class BaseWidget {
+
+  /** variable that holds the complete definition of this widgets (with selector,x,y,w,h) */
+  public widgetItem?: NgGridStackWidget;
+
   /**
    * REDEFINE to return an object representing the data needed to re-create yourself, other than `selector` already handled.
    * This should map directly to the @Input() fields of this objects on create, so a simple apply can be used on read
@@ -23,6 +27,10 @@ import { NgCompInputs, NgGridStackWidget } from './gridstack.component';
    * things that are not mapped directly into @Input() fields for example.
    */
   public deserialize(w: NgGridStackWidget)  {
+    // save full description for meta data
+    this.widgetItem = w;
+    if (!w) return;
+
     if (w.input)  Object.assign(this, w.input);
   }
  }

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

@@ -57,7 +57,7 @@ export class GridstackItemComponent implements OnDestroy {
     return this.el.gridstackNode || this._options || {el: this.el};
   }
 
-  private _options?: GridStackNode;
+  protected _options?: GridStackNode;
 
   /** return the native element that contains grid specific fields as well */
   public get el(): GridItemCompHTMLElement { return this.elementRef.nativeElement; }
@@ -67,7 +67,7 @@ export class GridstackItemComponent implements OnDestroy {
     delete this._options;
   }
 
-  constructor(private readonly elementRef: ElementRef<GridItemHTMLElement>) {
+  constructor(protected readonly elementRef: ElementRef<GridItemCompHTMLElement>) {
     this.el._gridItemComp = this;
   }
 

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

@@ -21,8 +21,12 @@ export type NgCompInputs = {[key: string]: any};
 
 /** extends to store Ng Component selector, instead/inAddition to content */
 export interface NgGridStackWidget extends GridStackWidget {
-  selector?: string; // component type to create as content
-  input?: NgCompInputs; // serialized data for the component input fields
+  /** Angular tag selector for this component to create at runtime */
+  selector?: string;
+  /** serialized data for the component input fields */
+  input?: NgCompInputs;
+  /** nested grid options */
+  subGridOpts?: NgGridStackOptions;
 }
 export interface NgGridStackNode extends GridStackNode {
   selector?: string; // component type to create as content
@@ -116,15 +120,15 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
     return reflectComponentType(type)!.selector;
   }
 
-  private _options?: GridStackOptions;
-  private _grid?: GridStack;
-  private _sub: Subscription | undefined;
-  private loaded?: boolean;
+  protected _options?: GridStackOptions;
+  protected _grid?: GridStack;
+  protected _sub: Subscription | undefined;
+  protected loaded?: boolean;
 
   constructor(
-    // private readonly zone: NgZone,
-    // private readonly cd: ChangeDetectorRef,
-    private readonly elementRef: ElementRef<GridCompHTMLElement>,
+    // protected readonly zone: NgZone,
+    // protected readonly cd: ChangeDetectorRef,
+    protected readonly elementRef: ElementRef<GridCompHTMLElement>,
   ) {
     this.el._gridComp = this;
   }
@@ -181,7 +185,7 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
   }
 
   /** get all known events as easy to use Outputs for convenience */
-  private hookEvents(grid?: GridStack) {
+  protected hookEvents(grid?: GridStack) {
     if (!grid) return;
     grid
       .on('added', (event: Event, nodes: GridStackNode[]) => { this.checkEmpty(); this.addedCB.emit({event, nodes}); })
@@ -198,7 +202,7 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
       .on('resizestop', (event: Event, el: GridItemHTMLElement) => this.resizeStopCB.emit({event, el}))
   }
 
-  private unhookEvents(grid?: GridStack) {
+  protected unhookEvents(grid?: GridStack) {
     if (!grid) return;
     grid.off('added change disable drag dragstart dragstop dropped enable removed resize resizestart resizestop');
   }
@@ -214,13 +218,17 @@ export function gsCreateNgComponents(host: GridCompHTMLElement | HTMLElement, w:
     //
     if (!host) return;
     if (isGrid) {
-      const container = (host.parentElement as GridItemCompHTMLElement)?._gridItemComp?.container;
       // TODO: figure out how to create ng component inside regular Div. need to access app injectors...
       // if (!container) {
       //   const hostElement: Element = host;
       //   const environmentInjector: EnvironmentInjector;
       //   grid = createComponent(GridstackComponent, {environmentInjector, hostElement})?.instance;
       // }
+
+      const gridItemCom = (host.parentElement as GridItemCompHTMLElement)?._gridItemComp;
+      if (!gridItemCom) return;
+      // check if gridItem has a child component with 'container' exposed to create under..
+      const container = (gridItemCom.childWidget as any)?.container || gridItemCom.container;
       const gridRef = container?.createComponent(GridstackComponent);
       const grid = gridRef?.instance;
       if (!grid) return;
@@ -234,17 +242,15 @@ export function gsCreateNgComponents(host: GridCompHTMLElement | HTMLElement, w:
       if (!gridItem) return;
       gridItem.ref = gridItemRef
 
-      // IFF we're not a subGrid, define what type of component to create as child, OR you can do it GridstackItemComponent template, but this is more generic
-      if (!w.subGridOpts) {
-        const selector = (w as NgGridStackWidget).selector;
-        const type = selector ? GridstackComponent.selectorToType[selector] : undefined;
-        if (type) {
-          const childWidget = gridItem.container?.createComponent(type)?.instance as BaseWidget;
-          // if proper BaseWidget subclass, save it and load additional data
-          if (childWidget && typeof childWidget.serialize === 'function' && typeof childWidget.deserialize === 'function') {
-            gridItem.childWidget = childWidget;
-            childWidget.deserialize(w);
-          }
+      // define what type of component to create as child, OR you can do it GridstackItemComponent template, but this is more generic
+      const selector = (w as NgGridStackWidget).selector;
+      const type = selector ? GridstackComponent.selectorToType[selector] : undefined;
+      if (type) {
+        const childWidget = gridItem.container?.createComponent(type)?.instance as BaseWidget;
+        // if proper BaseWidget subclass, save it and load additional data
+        if (childWidget && typeof childWidget.serialize === 'function' && typeof childWidget.deserialize === 'function') {
+          gridItem.childWidget = childWidget;
+          childWidget.deserialize(w);
         }
       }
 
@@ -271,7 +277,7 @@ export function gsCreateNgComponents(host: GridCompHTMLElement | HTMLElement, w:
 
 /**
  * called for each item in the grid - check if additional information needs to be saved.
- * Note: since this is options minus gridstack private members using Utils.removeInternalForSave(),
+ * 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()
  */

doc/CHANGES.md

@@ -118,6 +118,7 @@ Change log
 * fix: [#2736](https://github.com/gridstack/gridstack.js/bug/2736) safe practices around GridStackWidget.content no longer setting innerHTML
 * fix: [#2231](https://github.com/gridstack/gridstack.js/bug/2231),[#1840](https://github.com/gridstack/gridstack.js/bug/1840),[#2354](https://github.com/gridstack/gridstack.js/bug/2354)
 big overall to how we do sidepanel drag&drop helper. see release notes.
+* feat: [#2818](https://github.com/gridstack/gridstack.js/pull/2818) support for Angular Component hosting true sub-grids (that size according to parent) without requring them to be only child of grid-item-content.
 
 ## 10.3.1 (2024-07-21)
 * fix: [#2734](https://github.com/gridstack/gridstack.js/bug/2734) rotate() JS error

src/dd-gridstack.ts

@@ -79,7 +79,7 @@ export class DDGridStack {
         dEl.setupDraggable({
           ...grid.opts.draggable,
           ...{
-            // containment: (grid.parentGridItem && grid.opts.dragOut === false) ? grid.el.parentElement : (grid.opts.draggable.containment || null),
+            // containment: (grid.parentGridNode && grid.opts.dragOut === false) ? grid.el.parentElement : (grid.opts.draggable.containment || null),
             start: opts.start,
             stop: opts.stop,
             drag: opts.drag