Angular Material Autocomplete observable fires additional API call when selecting dropdown option

Question

Everytime I click on the dropdown, a GET API call is made to repopulate the list! I'm already making this call on ngOnInit() and do not need these additional API calls each time I make a selection (or simply when I just click on the dropdown) as these can be costly!

.ts file:

...
allEmployees: Observable<Employee[]>;
filteredEmployees: Observable<Employee[]>;

ngOnInit() {
    this.getEmployees();
    this.filteredEmployees = this.theHod.valueChanges
    .pipe(
      startWith(''),
      switchMap(value => this.filterEmployees(value))
    );
}

getEmployees(): void {
    this.allEmployees = this.apiService.getAll(globals.EMPLOYEE_ENDPOINT);
}

private filterEmployees(value: string | Employee) {
    let filterValue = '';
    if (value) {
      filterValue = typeof value === 'string' ? value.toLowerCase() : value.firstName.toLowerCase();
      return this.allEmployees.pipe(
        map(employees => employees.filter(employee => employee.firstName.toLowerCase().includes(filterValue) || employee.lastName.toLowerCase().includes(filterValue)))
      );
    } else {
      return this.allEmployees;
    }
}

displayHodFn(employee?: Employee): string | undefined {
    return employee ? employee.firstName + ' ' + employee.lastName : undefined;
}

get theHod() {
    return this.rForm.get('hod');
}
...

.html file:

...
<mat-form-field>
    <input type="text" placeholder="Select head of department" matInput formControlName="hod" [matAutocomplete]="Hodauto">
    <mat-autocomplete #Hodauto="matAutocomplete" [displayWith]="displayHodFn">
      <mat-option *ngFor="let employee of filteredEmployees | async" [value]="employee">
        {{employee.firstName}} {{employee.lastName}}  [{{employee.empCode}}]
      </mat-option>
    </mat-autocomplete>
</mat-form-field>
...

Any help/hint will be greatly appreciated

abhay tripathi · Accepted Answer · 2020-08-02 15:37:02Z

0

Although, i wasn't able to understand your complete code(in my opinion ,it can be written in a more simplified form). Here is one thing you can do to solve your problem.

modify getEmployees() as below

getEmployees(): void {
            this.allEmployees = Observable.of(_);
            this.apiService.getAll(globals.EMPLOYEE_ENDPOINT).subscribe(_ => {
            this.allEmployees = Observable.of(_);
            })
        }

answered Aug 2, 2020 at 15:37

abhay tripathi

4,1125 gold badges24 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Olivier M. Over a year ago

Property 'of' does not exist on type 'typeof Observable' is the error I get! could be my angular version (just upgraded to 10) Anyway, I think I figured it out. it's the way observers work with subscriptions. Thanks for replying... I'm sure this solution will help someone.

Olivier M. · Accepted Answer · 2020-08-02 19:01:22Z

0

This issue is similar to this one: Angular/RxJS 6: How to prevent duplicate HTTP requests?

adding .pipe(shareReplay(1)) to the observable solved the issue.

answered Aug 2, 2020 at 19:01

Olivier M.

516 bronze badges

Collectives™ on Stack Overflow

Angular Material Autocomplete observable fires additional API call when selecting dropdown option

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related