I want to implement angular 5 search pipe when the button is clicked.
I have a input box which will receive custom search value and it filters different keys values from array of objects. I have implemented angular pipe when typed input text, it searches but i want to trigger this action when user input and search button is clicked only. Is there anyway we could achieve this. I am stuck at implementing click event
itemsearch.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'itemsearch'
})
export class ItemsearchPipe implements PipeTransform {
public transform(value, keys: string, term: string) {
if (!term) {
return value;
}
return (value || []).filter(item => keys.split(',').some(key =>
item.hasOwnProperty(key) && new RegExp(term, 'gi').test(item[key])));
} }
itemcomponent.ts
<div *ngFor="let item of items | itemsearch:'name, age':query">
{{item.name}}
{{item.age}} </div>
</div>
What you can do is remove the pipe operator from the *ngFor and move the logic into your component
component.ts
import { ItemsearchPipe } from ...
search() {
// you can do whatever you want here, return the value or store it in a variable
this.items = this.ItemsearchPipe.transform(value, keys, term);
}
then in your html
<div *ngFor="let item of items">
<!-- ... -->
</div>
<button (click)="search()"></button>
when using the pipe operator it basically calls the pipe function on every value change, when you move the logic into your component you can control when the pipe function is called
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments