Angular: signal-based inputs not working

[E4RIJMP]

Hello,

There is an option to pass input fields in an 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;
}

This data however can only be access by using the @Input decorator. A signal-based approach does not work.
According to the documentation binding should be same:

Binding to an input is the same in both signal-based and decorator-based inputs:

<custom-slider [value]="50" />

But using something like value = input<number>(); if value was passed via input of NgGridStackWidget will result in value being a number rather than a signal. So, trying to access the value as a signal (e.g. The slider's value is ${this.value()}) will result in an error.

Regards

[adumesny]

GridStack ng wrapper was written long before Angular had signal inputs (based on code I wrote 8 years ago when I first started using the legacy jquery UI based js gridstack) and breaks due to this simple code.

BaseWidget.deserialize(w: NgGridStackWidget)  {
...
    if (w.input)  Object.assign(this, w.input);
}

All my code still uses @Input() (they work and easy to understand with set/get/transform) so I'm not super familiar with signal input, but a quick read has Signals created by the input function are read-only. so you can't call update() on them instead ? not sure how this would work...

[adumesny]

please provide working example (as bug report mentions)

Steps to reproduce

You MUST provide a working demo - keep it simple and avoid frameworks as that could have issues - you can use
https://jsfiddle.net/adumesny/jqhkry7g

[E4RIJMP]

Here is an example:
https://stackblitz.com/edit/stackblitz-starters-rsszngcq?file=src%2Fmain.ts