[SOLVED] angular: how to handle async pipes correctly


This Content is from Stack Overflow. Question asked by user16405471

I would like to display all users after all controls were added to the ProfileForm. That´s why I tried using the async pipe on my observable users$. But obviously it displays the users before all controls were added and not after. How do I wait until all controls are added?


profileForm = this.fb.group({
    name: []

users$: Observable<Users[]>;

ngOnInit(): void {
    this.users$ = this.userService.getAllUsers();

    this.users$.forEach(user =>
        this.profileForm.addControl(`user_${user.id}`, this.fb.control(id));


<mat-expansion-panel *ngFor="let user of users$ | async">
            <mat-checkbox [formControlName]="'user_' + user.id"></mat-checkbox>
            <span>{{ user.name }}</span>         


you can do it like this:

this.users$ = this.userService.getAllUsers().pipe(
   tap(users => {
        users.forEach(user =>
        this.profileForm.addControl(`user_${user.id}`, this.fb.control(id));

This Question was asked in StackOverflow by user16405471 and Answered by Eli Porush It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?