Angular 2. Keyup event not fired from input

Question

Here is very simple situation but I really do not have idea why it's not working. I got input text field that should call function on keyup event. But it's not.

<input class="form-control m-1" type="text" #search (keyup)="filterCatalogues(search.value)">

And the code itself.

filterCatalogues(value: string): CataloguesListDto[] {
    return this.catalogues.filter (catalogue => {
      return catalogue.companyName === value || catalogue.catalogueName === value;
    });
  }

Answer 1

You need to change your filterCatalogues event. I have assumed that catalogues is bound to the dom

<input class="form-control m-1" type="text" #search (keyup)="filterCatalogues()">

filterCatalogues(){
this.catalogues = this.catalogues.filter (catalogue => {
  return catalogue.companyName === searchModel|| catalogue.catalogueName === searchModel;
});
}

Answer 2

I am using angular 9.

The following example also works:

<input #myInput  type="text"
     placeholder="Search for data ..."
     (keyup)="doSearch(myInput.value)" />

The method doSearch updates another section with the found elements by using the router:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit(): void {
  }

  doSearch(value: string) {
    console.log(`value=${value}`);
    this.router.navigateByUrl(`/search/${value}`);
  }
}

The "value" string matches the route defined in app.module.ts:

const routes: Routes = [
     // other routes
    {path: 'search/:keyword', component: ProductListComponent},
];

The Component then uses a service to handle the request.