Currently, I am looking to implement an autocomplete feature using Angular Material in Angular 8.
Below is a snippet of the code used in the TypeScript file:
@Input() admins: User[];
userGroupOptions: Observable<User[]>;
filterFormFG: FormGroup;
constructor(private utilService: UtilsService, private messageService: MessageService) {
this.createForm();
this.userGroupOptions = this.filterFormFG.get('createdByRefId').valueChanges
.pipe(
startWith(''),
map(admin => admin ? this._filterStates(admin) : this.admins.slice())
);
}
ngOnInit() {
// tslint:disable-next-line: no-non-null-assertion
}
private _filterStates(value: string): User[] {
const filterValue = value.toLowerCase();
return this.admins.filter(state => state.fullname.toLowerCase().indexOf(filterValue) === 0);
}
And here's how it is implemented in the HTML file:
<mat-form-field class="example-full-width" appearance="outline">
<input matInput [placeholder]="'MESSAGES.SENDER' | translate" aria-label="'MESSAGES.SENDER' | translate" [matAutocomplete]="auto"
formControlName="createdByRefId">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let item of (admins | async)" [value]="item.firstName + ' ' +item.lastName">
{{ item.firstName + ' '+ item.lastName | translate }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
However, an error is being thrown which states:
ERROR Error: InvalidPipeArgument: '[object Object],[object Object]' for pipe 'AsyncPipe' at invalidPipeArgumentError (common.js:4800)
I am trying to figure out what exactly is causing this issue. How can I go about solving this problem?