Reputation: 3238
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;
});
}
Upvotes: 4
Views: 14508
Reputation: 2917
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.
Upvotes: 0
Reputation: 4294
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;
});
}
Upvotes: 4