Implement Angular and RxJS functions sequentially

Question

Implement Angular and RxJS functions sequentially

this.functionalityClient.activateFeature(featureName)
.pipe(
    concatMap(
        feature => { 
            this.feature = feature;
            return this.functionalityClient.setStatus(this.feature.id, 'activated');
        }
    ),
    concatMap(
        feature => {
            //update settings...
            return this.functionalityClient.deleteConfig(feature.config);
        }
    ),
    mergeMap(
        feature => {
            this.feature = feature;
            return this.functionalityClient.setGroup(feature.id, 'test');
        }
    )
)
.subscribe(
    feature => {
        //perform actions
    },
    error => ...
)

I want to enable my functions one by one, not all together. How can I achieve this without using forkJoin?

angular typescript rxjs

Answer 1

Answer №1

To maintain the initial switchMap function, consider using concat to sequence the desired three items. Concat will execute each item in order, waiting for one to finish before moving on to the next.

For more information on concat, refer to the documentation on RxjS Concat docs

this.userClient.getUser(userName)
  .pipe(
    switchMap(
      user => { 
        this.user = user;
        return concat(
            this.userClient.setStatus(this.user.id, 'banned'),
            this.userClient.deleteImg(user.img),
            this.userClient.setGroup(user.id, 'test')
        );
    }
)
)
.subscribe(
  ([user]) => {
    //actions
  },
  error => ...
)

During an episode of the Angular Show, they discussed the functionality of these Higher Order Mapping Operators, which can be beneficial in understanding their usage.

Answer 2

To maintain the initial switchMap function, consider using concat to sequence the desired three items. Concat will execute each item in order, waiting for one to finish before moving on to the next.

For more information on concat, refer to the documentation on RxjS Concat docs

this.userClient.getUser(userName)
  .pipe(
    switchMap(
      user => { 
        this.user = user;
        return concat(
            this.userClient.setStatus(this.user.id, 'banned'),
            this.userClient.deleteImg(user.img),
            this.userClient.setGroup(user.id, 'test')
        );
    }
)
)
.subscribe(
  ([user]) => {
    //actions
  },
  error => ...
)

During an episode of the Angular Show, they discussed the functionality of these Higher Order Mapping Operators, which can be beneficial in understanding their usage.

Answer 3

Answer №2

Opt for using switchMap

this.customerClient.getCustomer(customerName)
.pipe(
    switchMap(
        customer => { 
            this.customer = customer;
            return this.customerClient.setStatus(this.customer.id, 'blocked');
        }
    ),
    switchMap(
        customer => {
            //update property...
            return this.customerClient.deleteProfilePic(customer.img);
        }
    ),
    switchMap(
        customer => {
            this.customer = customer;
            return this.customerClient.setCategory(customer.id, 'special');
        }
    )
)
.subscribe(
    customer => {
        //perform actions
    },
    error => ...
)

Answer 4

Opt for using switchMap

this.customerClient.getCustomer(customerName)
.pipe(
    switchMap(
        customer => { 
            this.customer = customer;
            return this.customerClient.setStatus(this.customer.id, 'blocked');
        }
    ),
    switchMap(
        customer => {
            //update property...
            return this.customerClient.deleteProfilePic(customer.img);
        }
    ),
    switchMap(
        customer => {
            this.customer = customer;
            return this.customerClient.setCategory(customer.id, 'special');
        }
    )
)
.subscribe(
    customer => {
        //perform actions
    },
    error => ...
)

Implement Angular and RxJS functions sequentially

Answer №1

Answer №2

Similar questions

Creating a dynamic linear gradient background color using Angular 2 binding

*ngFor fails to update existing table rows and instead just appends new rows

Prevent ESLint from linting files with non-standard extensions

Uncovering the perfect body proportions using Webpack and SystemJS

Can you explain the true meaning behind this specific type definition?

Module not found in Typescript

When I try to load JSON data using the http.get() method in my Angular 2 template, it returns

Setting up Typescript for a Node.js project configuration

Using nodemailer to send an email with a dynamic variable that holds the HTML content

Highlighting the home page in the navigation menu even when on a subroute such as blog/post in the next.js framework

Type guards do not work properly on a union of enum types in TypeScript

The mysterious appearance of the <v-*> custom element in Vuetify Jest

Eliminate incorrect or invalid state when resetting a dropdown in an Angular ng-select component

Establishing the placement of map markers in Angular

The icons from Font Awesome are not displaying properly in Angular version 15

Can we use classlist for adding or removing in Angular 2?

The issue of not displaying the Favicon in Next.js is a common problem

Automating the selection of a drop down based on a condition in Angular 2: A step-by-step guide

switch between choosing, including, and deleting

Enabling specific special characters for validation in Angular applications