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

Issue

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

This is the equivalent of ngModel in signals syntax!

import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule],
  template: `
  <input type="text"
        [ngModel]="quantity()"
        (input)="onQuantitySelected($any($event.target).value)"/>

        {{quantity()}}
  `,
})
export class App {
  name = 'Angular';
  quantity = signal<number>(1);

  onQuantitySelected(qty: number) {
    this.quantity.set(qty);
  }
}

bootstrapApplication(App);

stackblitz

---

References:

medium article

Answered By - Naren Murali