Calling signals in angular v17 within the component functions gives error this.signal is not a function

Question

I have an angularv17 component Search like below

import { signal } from '@angular/core';

export class SearchComponent {
  public results = signal<Q[]>([]);
  public searchValue = signal('');

  public search() {
    // ... rest of the code

    // throws error here this
    // Error: ERROR TypeError: ctx.searchInputValue is not a function
    this.searchInputValue().toLowerCase();
  }
}

The problem arises from the input that I have in the template file

<input ...other-attr [(ngModel)]="searchInputValue" (input)="search" />

What should I do to fix the issue?

I am expecting it to run search function without any difficulties.

Also, I tried to pass [(ngModel)]="searchInputValue()" ngModel like so but it gives another error Parser Error: Unexpected token '=' at column 20

Answer 1

From v17.2 Onwards

Angular support passing signal directly to double bindings.

<input ...other-attr [(ngModel)]="searchInputValue" />

The double binding will implicitly unwrap the signal for you an updates its value whenever the child component emits a new value.

---

Pre- v17.2 Answer

You cannot use the banana in a box (two way binding) on signals because this will not automatically call set()/update() for you.

<input ...other-attr [ngModel]="searchInputValue" (input)="search($event)" />

When the search() method should update the signal.