Angular wait service subscription from component?

Question

I have a problem filling a Users autocomplete on first load.

This is my UsersService:

public users: User[] = [];

constructor(private http: HttpClient) {
    this.http.get<User[]>(environment.apiUrl + URLS.USERS).subscribe({
      next: (res) => {
        this.Users = res;
      },
      error: (err) => {
        console.log(err);
      },
    });
}

filterUsers(val: string) {
  return this.users.filter(
    (user) =>
      user.name.toLowerCase().includes(val.toLowerCase())
  );
}

I get Users[] on the service constructor because this.users is going to be used by multiple components.

On the other hand I have a component as following:

constructor(
  private fb: FormBuilder,
  public userService: UsersService) {

  this.form = this.fb.group({
    user: this.user = this.fb.control('')
  });

  this.filteredUsers = this.user.valueChanges.pipe(
      startWith(''),
      map((value: string) => this.userService.filterUsers(value))
  );
}

And the view:

<mat-form-field class="example-full-width" appearance="outline">
    <mat-label>User</mat-label>
    <input type="text" matInput formControlName="user" [matAutocomplete]="auto">
    <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" [panelWidth]="'auto'">
        <mat-option *ngFor="let sp of filteredUsers | async" [value]="sp.name">
            {{sp.name}}
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

The problem: on first load,filterUsers is executed before the http GET request is completed, so this.users is null and nothing is returned. The autocomplete is empty when focusing.

If I type anything then this.users already has value and the list is correctly displayed.

How can I set values on my autocomplete on first load?

Iñigo · Accepted Answer · 2022-05-26 13:00:04Z

0

Finally solved with observables:

Service:

public users: User[] = [];

private subj = new BehaviorSubject('');
userObs = this.subj.asObservable();

constructor(private http: HttpClient) {
    this.http.get<User[]>(environment.apiUrl + URLS.USERS).subscribe({
      next: (res) => {
        this.Users = res;
        this.subj.next('ok');
      },
      error: (err) => {
        console.log(err);
      },
    });
}

Component:

ngOnInit(): void {
  this.userService.userObs.subscribe(x => { if (x == "ok") this.user.updateValueAndValidity(); });
}

answered May 26, 2022 at 13:00

Iñigo

2,02610 gold badges33 silver badges61 bronze badges

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

1 Comment

R. Salisbury Over a year ago

This solution will scale very poorly if you're going to have a lot of users in your application. It would be better to change your API to do the filtering on the server. Then you wouldn't even need a service method:

filteredUsers$ = this.user.valueChanges.pipe(debounceTime(100), switchMap(str => this.http.get<User[]>(url +'filter='+ str)))

Satish Sahani · Accepted Answer · 2022-05-26 12:09:26Z

-1

Instead of putting filterUsers in constructor put it into ngOnInit. ngOnInit is called after the constructor.

answered May 26, 2022 at 12:09

Satish Sahani

11 bronze badge

2 Comments

Iñigo Over a year ago

No sense, ngOnInit also executed before an http response.

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Angular wait service subscription from component?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related