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...

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

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

@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 }}