CODEWITHSUNDEEP
angular
Anonymus_goat
Anonymus_goat

Reputation: 339

How to wait for a function for finish in angular 4?

Below is my code, in the for loop I call the delete method, but I want to wait for funcion to finish, before call it again. I have a company and a Project class, in the Project class there is a company array, this contains the list of the companies which is connected to the project. The reason why I want to wait for funcion to finish, because when I want to delete multiple companies from the project, this call multiple delete method in the same time and delete only one company in the same time.

import { Component, OnInit } from '@angular/core';
import { Company } from '../company';
import { CompaniesService } from './companies.service';
import { SharedService } from '../shared.service';

@Component({
    selector: 'my-companies',
    templateUrl: './companies.component.html',
    styleUrls: ['./companies.component.css']
})

export class CompaniesComponent implements OnInit{
    constructor(
        private companiesService: CompaniesService,
        private sharedService: SharedService
    ){}

    companies: Company[];

    getCompanies(): void{
        this.companiesService
        .getCompanies()
        .subscribe(companies => {this.companies = companies, this.isLoading=false});
    }

    method(): void{
        let array=this.companies;
        for (var i = 0; i < array.length; i++) {
            if(array[i].selected)
            {
                this.delete(array[i]);
            }
        }
    }

    delete(company: Company): void {
        this.companies = this.companies.filter(h => h !== company);
        this.sharedService.deleteProjectFromCompany(company);
        this.companiesService.delete(company).subscribe();
    }
}

Upvotes: 1

Views: 2541

Answers (1)

Stefan Rein
Stefan Rein

Reputation: 9036

You need to return in your method Observables and then put them in an array. After this, you call Observable.forkJoin() and wait all to resolve with subscribe.

Something like this code:

public deleteAll(deletingList: {id: number}[]): Observable<void[]> {
    const deleteList: Observable<void> = [];
    deletingList.forEach(item => deleteList.push(this.delete(item.id)));
    return Observable.forkJoin(deleteList);
}

public delete(id: number): Observable<void> {
    return this.http.delete(...);
}

At first I would rename your "method" into "delete":

/**
    Filter only selected companies
    Add every deleting company Observable
    Do a forkJoin: https://www.learnrxjs.io/operators/combination/forkjoin.html
*/ 
public delete(): Observable<Company[]> {
    const deletingCompanies: Array<Observable<void>> = [];
    this.companies
        .filter(company => company.selected)
        .forEach(company => deletingCompanies.push(this._delete(company)));

    return Observable.forkJoin(deletingCompanies);
}

private _delete(company: Company): Observable<Company> {
    this.companies = this.companies.filter(h => h !== company);
    this.sharedService.deleteProjectFromCompany(company);
    return this.companiesService.delete(company);
}

If you now subscribe on the "method"-method, all calls are complete on the subscription.

Upvotes: 1

Related Questions