How can i filter display of option List?

Issue

I have a reusable options component which gets passed in a opject that holds the options to display. In some cases the option list might be large and there is a need to be able to search the list and narrow down the displayed option. For that i created a search inbox and i can catch the change event. The problem is how can i only change what is displayed when the filter is changed without changing the whole object ? Also i need to be able on sve send all selected items filtered or not back to parent so it can update the API.

export class MultiSelectBoxCardComponent {

    private _optionsList: IOptionMultiSelectBox[];
    bar = '';
    // emit values of selected options
    @Output() optionSelectionChanged = new EventEmitter<IOptionMultiSelectBox>();
    @Output() onSave = new EventEmitter<IOptionMultiSelectBox[]>();
    @Output() onCancel = new EventEmitter<boolean>();
    @Input() set optionsList(options: IOptionMultiSelectBox[]) {
        this._optionsList = options;
    }
    get optionsList() {
        return this._optionsList;
    }


    save() {
        this.onSave.emit(this.optionsList);
    }

    cancel() {
        this.onCancel.emit(true);
    }

    emitOptionChanged(option: IOptionMultiSelectBox) {
        this.optionSelectionChanged.emit(option);
    }

    onChangeEvent(event: any){
        console.log(event);

           return this.optionsList.filter(option => option.name.toLowerCase().indexOf(event.toLowerCase()) !== -1);
 }

}

And here is my template code for the option List

 <div *ngFor="let option of optionsList">
            <igx-checkbox [checked]="option.selected"
                          (change)="option.selected = !option.selected; emitOptionChanged(option)">
                {{option.name}}
            </igx-checkbox>
        </div>

Solution

Simplest way is to use a pipe

Change your Template code to below and asuming you want to search on fieldname name otherwise change it to the name of the field you use.

 <div *ngFor="let option of optionsList |  optionFilter : optionsearch.value : 'name'">
            <igx-checkbox [checked]="option.selected"
                          (change)="option.selected = !option.selected; emitOptionChanged(option)">
                {{option.name}}
            </igx-checkbox>
        </div>

Then create a pipe like this and make sure you register it

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'optionFilter' })
export class OptionFilterPipe implements PipeTransform {
 
  public transform(data: any[], searchText: any, fieldName: string): any {
  if (searchText == null || data == null) {
    return data;
  }
   return data.filter(item => item[fieldName].toLowerCase().indexOf(searchText.toLowerCase()) !== -1);
  }
}

With using pipe you can filter your list most effectively

Answered By – MisterniceGuy

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0