Merge pull request #2821 from adumesny/master

angular support for nested Grid components

Author: adumesny

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

@@ -27,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,9 +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
-  subGridOpts?: NgGridStackOptions; // nested grid options
+  /** 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
@@ -117,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;
   }
@@ -182,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}); })
@@ -199,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');
   }
@@ -247,7 +250,6 @@ export function gsCreateNgComponents(host: GridCompHTMLElement | HTMLElement, w:
         // if proper BaseWidget subclass, save it and load additional data
         if (childWidget && typeof childWidget.serialize === 'function' && typeof childWidget.deserialize === 'function') {
           gridItem.childWidget = childWidget;
-          childWidget.widgetItem = w;
           childWidget.deserialize(w);
         }
       }
@@ -275,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()
  */