0

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>

1 Answer 1

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.