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

[josueggh]

@E4RIJMP

I tested your example, and with your current implementation you can still render the title like this:

<div>Title: {{ title }}</div>

Under the hood, Angular’sinput<T>()creates a signal that returns your input value. Meanwhile, the BaseWidget.deserialize() does:

if (w.input) Object.assign(this, w.input);

If w.input already contains a title property with a string value, Object.assign overwrites the signal (title = input<string>()) with that plain string. At runtime, this.title is no longer the signal but the string you want to display, which is why you get the error.

A simple workaround is to wrap your raw signal in a computed and invoke that in the template:

export class SignalBasedComponent extends BaseWidget {
  title = input<string>();
  computedTitle = computed(() => this.title);
}

  <!-- No warning, because computedTitle() is a function call -->
  Title: {{ computedTitle() }}
  <!-- Still works but raises NG8109 -->
  Title with warning: {{ title }}