Invoke async Method in Angular Typescript

Question

We are new to angular and we are having few methods needs to be invoked in sequence and return a value. Here the return is invoking before completing the execution. I have tried different things like async await, promise, setTimeout but no luck. Is there any solution to work this in sync order in angular

transform(input:any)
{

    this.getCachedUsers(); // this will set the this.CachedUsers array using a http get call(subscribe)
    this.getUserFromCachedUsers(input); // this will set the this.userName based on input userId from this.CachedUsers
    return this.userName; // here its returning empty
}

Drashti Dobariya · Accepted Answer · 2022-04-06 11:57:51Z

1

You should try using observable flat operators.

For transforming items emitted by an Observable into another Observable after completion of the previous observable, you probably want to use the concatMap operator. It creates an inner Observable and flats its result to the outer stream.

const source = this.getCachedUsers()
    .pipe(
        concatMap(result => this.getUserFromCachedUsers(result.userId))
     )
    .subscribe(result2 => {
        // do some stuff
    });

Here are some flat operators you can use that behave differently:

flatMap/mergeMap - creates an Observable immediately for any source item, all previous Observables are kept alive
concatMap - waits for the previous Observable to complete before
creating the next one
switchMap - for any source item, completes the previous Observable
and immediately creates the next one
exhaustMap - map to inner observable, ignore other values until that observable completes

answered Apr 6, 2022 at 11:57

Drashti Dobariya

3,0962 gold badges13 silver badges29 bronze badges

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

4 Comments

Keppy Over a year ago

Thanks for the nice explanation. In my case the returning is the problem. first method is observable and the second method is sync method. If I do with with observable, the first two methods can be inside the pipe and map but the return still executes before the previous operation completed. @drashti-dobariya

Drashti Dobariya Over a year ago

Rather than returning a variable, you can return observable with the the value of userName. Then wherever you want to use it, you can directly subscribe to that observable.

Drashti Dobariya Over a year ago

Also, if you are using a class variable, you wont need to return it.

Keppy Over a year ago

since this is a pipe transform method, we are returning since this value will be using in the consuming end. I will try with subscribe and return in same method.

Collectives™ on Stack Overflow

Invoke async Method in Angular Typescript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related