I have a list of cars that I am converting into a FormArray to display as buttons in an HTML list. My goal is to filter these cars based on their names.
CarComponent.html
<input #searchBox id="search-box" (input)="search(searchBox.value)" />
<form [formGroup]="form" *ngIf="showCars">
<input type="button" class ="btn" formArrayName="carsList" *ngFor="let car of carsList$ | async; let i = index" value="{{carsList[i].name}}" >
</form>
CarComponent.ts
carsList$: Observable<Car[]>;
private searchTerms = new Subject<string>();
search(term: string): void {
this.searchTerms.next(term);
}
constructor(private formBuilder:FormBuilder,...)
{
this.form = this.formBuilder.group({
carsList: new FormArray([])
});
this.addButtons();
}
ngOnInit() {
this.spinner.show();
this.carsList$ = this.searchTerms.pipe(
debounceTime(300),
distinctUntilChanged(),
switchMap((term:string)=>
this.carsList ??? // Is this correct ?? What do I put here?
)
}
private addButtons() {
this.carsList.map((o,i)=>{
const control = new FormControl;
(this.form.controls.carsList as FormArray).push(control);
})
}
export const CarsList: Car[] = [
{ name: 'Mercedes' },
{ name: 'BMW' },
{ name: 'Porsche' },
{ name: 'Cadillac' }
]
I'm looking for advice on how to efficiently filter the list without using a pipe for performance reasons.