I've created simple code using JavaScript to filter the data from product in Angular 10. But the onkeyup in html does not recognize the search function in typescript. What could be the problem?
StackBlitz URL: https://stackblitz.com/edit/angular-ivy-scaucq?file=src/app/app.component.html
<input type="text" id="myInput" (keyup)="search()" placeholder="Search for product.." title="Type in a name">
Use (keyup) instead of onkeyup.
According to your example would be better like this
app.component.html
<input
type="text"
id="myInput"
(keyup)="search($event.target)"
placeholder="Search for product.."
title="Type in a name"
/>
<ul id="myProduct" *ngFor="let product of filteredProducts">
<li>
<a href="#">{{ product.name }}</a>
</li>
</ul>
app.component.ts
import { Component, OnInit, VERSION } from '@angular/core';
import { Product } from './product';
import { ProductGroup } from './product-group';
import { ProductService } from './services/product.service';
// import * as var from 'jquery';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
constructor(private productService: ProductService) {}
product: Product[];
productGroup: ProductGroup[];
availableProducts: Product[];
filteredProducts: Product[];
search(e) {
this.filteredProducts = this.availableProducts.filter(
(p) => p.name.toUpperCase().indexOf(e.value.toUpperCase()) > -1
);
}
getProduct() {
this.productService.getProductsSmall().then((products) => {
this.availableProducts = products;
this.filteredProducts = products;
});
}
ngOnInit() {
this.getProduct();
}
}
You need to use (keyup) and I couldn't resist to review your code. Using document.getElement and so on is not the angular way of doing things. It can be done much easier. Please have a look at my Stackblitz: https://stackblitz.com/edit/angular-ivy-4bgobb?file=src/app/app.component.ts
<input type="text" id="myInput" (keyup)="search(searchTerm)" [(ngModel)]="searchTerm" placeholder="Search for product.." title="Type in a name">
<ul id="myProduct" *ngFor="let product of shownProducts">
<li><a href="#">{{product.name}}</a></li>
</ul>
constructor(private productService: ProductService) {}
product: Product[];
productGroup: ProductGroup[];
availableProducts: Product[];
shownProducts: Product[];
public searchTerm = "";
search(searchValue: string) {
this.shownProducts = this.availableProducts.filter((product: Product) => product.name.toLowerCase().includes(searchValue.toLowerCase()));
}
getProduct() {
this.productService
.getProductsSmall()
.then(products => ((this.availableProducts = products), this.search("")));
}
I've added [(ngModel)] in your template and replaced your javascript with a filter function.