I am currently implementing mat-select-search using this example. I am utilizing reactive forms with dynamic data where my server's response is just an array of items. The issue I am facing is that when I type in the search, it works fine but the initial list does not show up. How can I ensure that my dynamic data is displayed for the first time?
.ts
vehicles = [];
public filteredOptions: ReplaySubject<any[]> = new ReplaySubject<any[]>(1);
protected _onDestroy = new Subject<void>();
@Output() onSelectionChange: EventEmitter<any> = new EventEmitter<any>();
public modelFilterCtrl: FormControl = new FormControl();
@ViewChild('multiSelect', { static: true }) multiSelect: MatSelect;
ngOnInit(): void {
this.campaignService.getVehicles().subscribe((data: any[])=>{
this.vehicles = data;
})
this.modelFilterCtrl.valueChanges
.pipe(takeUntil(this._onDestroy))
.subscribe(() => {
this.filterEntities();
});
}
set data(data: any[]) {
this._data = data;
// load the initial list
this.filteredOptions.next(this.data.slice());
}
get data(): any[] {
return this._data;
}
private _data: any[];
ngAfterViewInit(): void {
this.setInitialValue();
}
onChange($event) {
this.onSelectionChange.emit($event);
}
private setInitialValue() {
this.filteredOptions
.pipe(take(1), takeUntil(this._onDestroy))
.subscribe(() => {
if (this.multiSelect)
this.multiSelect.compareWith = (a: any, b: any) => a === b;
});
}
.html
<mat-select multiple formControlName="Brand" (selectionChange)="onChange($event)" #multiSelect>
<mat-option>
<ngx-mat-select-search
[formControl]="modelFilterCtrl"
[placeholderLabel]="'Search...'">
</ngx-mat-select-search>
</mat-option>
<mat-option *ngFor="let item of filteredOptions | async" [value]="item">{{item}}</mat-option>
</mat-select>