[SOLVED] How to handle / bind Angular signals with <input> of the html?

How to handle / bind Angular signals with <input> of the html?

In my Angular app the variable value will be changed by a HTML element <input> and two-way binding as

<input
    [(ngModel)]=variableName
    (OnKeyup)="DoSomething"
  >

But now [(ngModel)] will not work for signals. Should it now the best praxis to use e.g. a (onKeyup) to start a function, which will excecute ... variableName.set(value). And how to get the value and "sent" back to the input field value?

Solution

i tried out a new way to test if using the 2 way bind would work.

<textarea class="license-textarea" rows="5" cols="30" pInputTextarea [(ngModel)]="vm.licenseKey"
                (input)="onLicenseKeyEntry($event)" placeholder="Enter license key"></textarea>

Using the computed signal along side with a get viewMode:

licenseKey: WritableSignal<string> = signal('');
  isLicenseValid: WritableSignal<boolean> = signal(false);
  protected readonly viewMode = computed(() => ({
    licenseKey: this.licenseKey(),
    isLicenseValid: this.isLicenseValid()
  }));
  get vm(): ReturnType<typeof this.viewMode> {
    return this.viewMode();
  }

Of course, this approach fits in my case. I just would like to share a alternative usage with the 2 way bind. 👍