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>