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 signas, but not @Input() including setter/getter, 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 }}

[muuvmuuv]

Are there any plans to upgrade the Angular components to v20 best practises? The Angular migrations should do most of the hard work I think or using some ngxtension migrations which are added by the community https://ngxtension.netlify.app/utilities/migrations/host-binding-migration/

[adumesny]

@muuvmuuv problem with using latest ng is that I do not have support/release for multiple ng versions of the lib so it would break for anybody who is not on the matching latest. that's why the build is still v14 (works with 14+ as it need 14+ API for dynamic creation).

I would rather fix the assign above to check for signal and use bare minimum for it, if even that. @input work just fine to me...