Angular2/4/6 Pass Custom Pipe Filtered List from HTML to Component

Question

I'm currently working on a search bar component. Using custom pipe, I'm able to show a dropdown list of items. I need to pass the filtered list of items (Items | CustomPipe : search_input) from searchbar.component.html to searchbar.component.ts but I'm not sure how

searchbar.component.html

<ul *ngIf="(Items | CustomPipe : search_input).length>0" class="list-group dropdown-container">
    <li *ngFor="let item of Items | CustomPipe : search_input; index as i" [class.active]="i == arrowkeyLocation" (mouseover)=changeStyle($event)
        (mouseleave)=changeStyle($event) (click)="showConfirm(item)" class="list-group-item" [innerHTML]="item.model | highlight : search_input"></li>
</ul>

My current approach:

<input #filterSize type="hidden" value="{{(Items | CustomPipe : search_input).length}}">
<input #filterContent type="hidden" value="{{(Items | CustomPipe : search_input)}}">

searchbar.component.ts

export class SearchbarComponent implements OnInit {
 arrowkeyLocation: number = 0;
@ViewChild('filterSize') filterSize: any;
@ViewChild('filterContent') filterContent: any;
@Output() onSelect: EventEmitter<number> = new EventEmitter<number>();
constructor() {
}
ngOnInit() { }
changeStyle(event) {

    let content = this.filterContent.nativeElement.value;
    let dropdownSize = this.filterSize.nativeElement.value;

    if (event.type == "keydown") {
        switch (event.keyCode) {
            case 38: // this is the ascii of arrow up
                if (this.arrowkeyLocation == -1) {
                    this.arrowkeyLocation = dropdownSize;
                }
                this.arrowkeyLocation--;
                break;
            case 40: // this is the ascii of arrow down
                if (this.arrowkeyLocation == dropdownSize) {
                    this.arrowkeyLocation = -1;
                }
                this.arrowkeyLocation++;
                break;
            case 13:
                this.onSelect.emit(content[this.arrowkeyLocation]);
                break;
        }
    }
}

However, I'm not able to retrieve the list of objects correctly (content variable). It's passed over from html to the component as a string value of [object Object]. Anyone can suggest a workaround this?

Answer 1

I can provide a work-around for this.

1. Use a normal utility function and in that function implement the filter logic.
2. on keypress event call that function from searchbar.component.ts and populate filtered content
3. Then use filtered content in searchbar.component.ts as you wish
4. Also Use filtered content in your searchbar.component.html as well.

Example: [This is not a real code]

searchbar.component.ts

KeyPressCallback(search_input) {
    this.filteredContent = utilityFunctionToFilter(Items, search_input);
    // Do whatever you like with filteredContent.

}

searchbar.component.html

 <ul *ngIf="filteredContent.length>0" class="lis ...