Angular documentation

[E4RIJMP]

Hi,
I wanted to try out gridstack.js for an Angular project an ran into several issues:

• Most of the links on the https://gridstackjs.com/demo/index.html page regarding the Angular Wrapper are dead.
• The very first code example in the README.md at https://github.com/gridstack/gridstack.js/tree/master/angular/ does not work.
  • So, under "Dynamic grid items" the combination of "HTML" 🡒 "<gridstack [options]="gridOptions"></gridstack>" and "Standalone Component Code" 🡒 "public gridOptions: GridStackOptions" does not seem to create proper items. It will work if either "GridStackOptions" is replaced with "NgGridStackOptions" or the HTML is altered in a way where items are created e.g., via @for. Most likely it's supposed to be the former. Then the import of "GridstackItemComponent" seems to be unnecessary.
• In the "More Complete example" it says "// or call load()/addWidget() with same data" for "{x:0, y:0, minW:2, selector:'app-a'}" but "addWidget()" is typed as "addWidget(w: GridStackWidget): GridItemHTMLElement;" and "GridStackWidget" does not support "selector" (unlike "NgGridStackWidget"). So, the type of "w" probably needs to be changed.

Regards

[adumesny]

| "public gridOptions: GridStackOptions" does not seem to create proper items. It will work if either "GridStackOptions" is replaced with "NgGridStackOptions"

hummm. NgGridStackOptions is only needed for 'selector' and 'input' fields (more complete example after). don't see why that would matter. @for should be avoided (see doc)

2. addWidget() just pass one item at time. load() takes array. simple

I will fix the link and tweak the doc.

[E4RIJMP]

2. addWidget() just pass one item at time. load() takes array. simple

There might be a misunderstanding.

This is taken from the README.md:

  children: [ // or call load()/addWidget() with same data
    {x:0, y:0, minW:2, selector:'app-a'},
    {x:1, y:0, minW:2, selector:'app-a', input: { text: 'bar' }}, // custom input that works using BaseWidget.deserialize() Object.assign(this, w.input)
    {x:2, y:0, selector:'app-b'},
    {x:3, y:0, content:'plain html'},
  ]

And this is the signature of addWidget():
addWidget(w: GridStackWidget): GridItemHTMLElement;

So, w is typed as GridStackWidget which causes a TypeScript error for something like
addWidget({x:0, y:0, minW:2, selector:'app-a'})
as GridStackWidget does not support selector.

This is the type definition of GridStackWidget:

export interface GridStackWidget extends GridStackPosition {
    /** if true then x, y parameters will be ignored and widget will be places on the first available position (default?: false) */
    autoPosition?: boolean;
    /** minimum width allowed during resize/creation (default?: undefined = un-constrained) */
    minW?: number;
    /** maximum width allowed during resize/creation (default?: undefined = un-constrained) */
    maxW?: number;
    /** minimum height allowed during resize/creation (default?: undefined = un-constrained) */
    minH?: number;
    /** maximum height allowed during resize/creation (default?: undefined = un-constrained) */
    maxH?: number;
    /** prevent direct resizing by the user (default?: undefined = un-constrained) */
    noResize?: boolean;
    /** prevents direct moving by the user (default?: undefined = un-constrained) */
    noMove?: boolean;
    /** same as noMove+noResize but also prevents being pushed by other widgets or api (default?: undefined = un-constrained) */
    locked?: boolean;
    /** value for `gs-id` stored on the widget (default?: undefined) */
    id?: string;
    /** html to append inside as content */
    content?: string;
    /** true when widgets are only created when they scroll into view (visible) */
    lazyLoad?: boolean;
    /** local (vs grid) override - see GridStackOptions.
     * Note: This also allow you to set a maximum h value (but user changeable during normal resizing) to prevent unlimited content from taking too much space (get scrollbar) */
    sizeToContent?: boolean | number;
    /** local override of GridStack.resizeToContentParent that specify the class to use for the parent (actual) vs child (wanted) height */
    resizeToContentParent?: string;
    /** optional nested grid options and list of children, which then turns into actual instance at runtime to get options from */
    subGridOpts?: GridStackOptions;
}

There is no selector property. The selector property is part of NgGridStackWidget:

export interface NgGridStackWidget extends GridStackWidget {
    /** 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;
}

So, I think either the signature of addWidget needs to be changed, maybe:
addWidget(w: NgGridStackWidget): GridItemHTMLElement;
or there should be an additional method that supports NgGridStackWidget, maybe:
addNgWidget(w: NgGridStackWidget): GridItemHTMLElement;

[adumesny]

API cannot know about the ng wrapper. NgGridStackWidget and GridStackWidget are interchangeable (why all fields are optional).