דוגמא קומפוננטת חיפוש
ניצור קומפוננטת חיפוש ללא כפתור.
הקומפוננטה מציגה תיבת טקסט שבה מכניסים את ערך החיפוש.
search.component.html
<input type="text" #txtNum (input)="onValueChange(txtNum.value)">
קודם נציג ל-console את הערך של החיפוש שמקבלים מתיבת הטקסט.
search.component.ts
onValueChange(str:string){
console.log(str);
}
עם הקוד הזה אנחנו מחפשים כל פעם כשנכנסת אות, אנחנו רוצים לחפש רק כשיש צורך, כלומר שמפסיקה ההקלדה.
נגדיר subject שיזרוק לנו את האירוע של ההקלדה.
search.component.ts
private searchWordChange = new Subject<string>();
ngOnInit(): void{
this.searchWordChange.subscribe(newWord => {
console.log(newWord);
})
}
onValueChange(str:string){
this.searchWordChange.next(str);
}
נשתמש ב-filter כדי להתחיל את החיפוש רק כשיש יותר מ-2 אותיות.
search.component.ts
private searchWordChange = new Subject<string>();
ngOnInit(): void {
this.searchWordChange.pipe(
filter((x) => x.length > 2)
).subscribe(newWord => {
console.log(newWord);
})
}
onValueChange(str:string){
this.searchWordChange.next(str);
}
אפשר להשתמש ב-pipe של debounceTime להתחיל את החיפוש רק כשעובר זמן ללא הקלדה.
search.component.ts
private searchWordChange = new Subject<string>();
ngOnInit(): void {
this.searchWordChange.pipe(
filter((x) => x.length > 2),
debounceTime(500)
).subscribe(newWord => {
console.log(newWord);
})
}
onValueChange(str:string){
this.searchWordChange.next(str);
}
פעולת החיפוש היא א-סנכרונית, אז אפשר לשלב observables בתהליך. את תוצאת החיפוש נשמור לתוך פרמטר בקומפוננטה שאנחנו משתמשים בחיפוש.