Tips for managing errors when utilizing pipe and mergemap in Angular

In the code snippet provided, two APIs are being called. If there is an error in the first API call, I want to prevent the second API call from being made. Can you suggest a way to handle errors in this scenario?

this.userService.signUp(this.signUpForm.value.fullName, this.signUpForm.value.email, this.signUpForm.value.password)
        .pipe(mergeMap((res: any)=> 
          this.notificationService.sendVerificationEmail(res.email)))
        .subscribe((notificationResponse: any)=>{
            console.log(notificationResponse.message)
        })
angulartypescriptrxjs

Answer №1

It is advised to opt for switchMap over mergeMap.

switchMap necessitates the completion of the preceding observable before moving on to the next one.

this.userService.signUp(this.signUpForm.value.fullName, this.signUpForm.value.email, this.signUpForm.value.password)
  .pipe(switchMap((res: any) => 
    this.notificationService.sendVerificationEmail(res.email)))
  .subscribe({
    next: (notificationResponse: any) => {
      console.log(notificationResponse.message)
    },
    error: (err: any) => console.error(err)
  })

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Embracing Interfaces Over 'any' Types in TypeScript

https://i.stack.imgur.com/W6NMa.pngWould it be beneficial to utilize an interface as a variable type rather than opting for any? For instance, if I have 3 functions where I am declaring variables that can contain alphanumeric data, would defining them us ...

javascripttypescript

Exclude the key-value pair for any objects where the value is null

Is there a way to omit one key-value pair if the value is null in the TypeScript code snippet below, which creates a new record in the Firestore database? firestore.doc(`users/${user.uid}`).set({ email: user.email, name: user.displayName, phone: ...

javascripttypescript

Change the value of the checked property to modify the checked status

This is a miniCalculator project. In this mini calculator, I am trying to calculate the operation when the "calculate" button is pressed. However, in order for the calculations to run correctly in the operations.component.ts file, I need to toggle the val ...

javascriptangulartypescript

Is there a way to modify the background of a div when a specific field within my component is true and the div is being hovered over?

When I hover over a div, I want the background color to change. Additionally, I need the color choice to be based on an element within my component. <div *ngFor="let u of users;" [style:hover.background-color] = "u.selected ? 'red ...

htmlcssangular

Before the service call finishes, Akita queries this.selectAll and returns an empty list

Here is the code snippet from my file named widgetquery.ts: @Injectable({ providedIn: 'root' }) export class WidgetQuery extends QueryEntity<WidgetState, WidgetTO> { public Widget$: Observable<WidgetTO> = this.selectActive().filter( ...

angulartypescriptstate-managementangular-akitaakita

"The debate over using 'stringly typed' functions, having numerous redundant functions, or utilizing TypeScript's string enums continues to divide the programming

I have a specific object structure that contains information about countries and their respective cities: const geo = { europe: { germany: ['berlin', 'hamburg', 'cologne'], france: ['toulouse', ' ...

javascripttypescriptfunctionenumsfunctional-programming

Ensure that compiler errors are eliminated for object properties that do not exist

Coming from a JavaScript background, I recently began working with Angular 2 and TypeScript. Below is a snippet of my code: export class AddunitsComponent implements OnInit { public centers:any; constructor(){ this.centers = {}; }} In my view, I h ...

angulartypescript

Unable to access nested JSON in Angular 2

To sum up, if I use the following code: {{ foo.bar | json }} Assuming foo is a JSON object and bar is a JSON object within foo, Angular 2 will load the data in foo.bar correctly and display the JSON object. However, trying to access foo.bar.baz will resu ...

angular

Angular material tree with nested branches broken and in disarray

I'm facing a challenge with the UI issue of expanding trees on the last node, as it always creates excessive lines from the nodes, similar to the image below. I attempted to adjust the left border height but saw no change at all. Does anyone have any ...

cssangularmaterial-ui

Exploring the functionalities of arrays in Typescript: A beginner's guide

Currently, I am working on a react project and building a store within it. Below is the code snippet I have implemented: import React, { useReducer, useEffect } from 'react'; import { v4 as uuid } from 'uuid'; import { Movie, MoviesAct ...

reactjstypescriptreduxuse-reducer

Sort attributes by the type of property

Is there a way to create a customized type by extracting specific properties from a generic type? class Test { value1!: Date value2!: number value3!: Date value4!: string } type FilterProperties<T, TFieldType> = //looking for a solution to se ...

typescriptgenerics

Is there a way to reduce the version of npm in a nodejs project?

Despite many attempts made by others, I am still struggling to resolve this issue. I have experimented with the following: npm uninstall -g npm@<version> npm uninstall npm --save npm uninstall -g npm --save However, all my efforts have been unsuc ...

node.jsangularnpm

Using LINQ with ngFor in Angular 6

Within the component.ts, I extract 15 different lookup list values and assign each one to a list, which is then bound to the corresponding <select> element in the HTML. This process functions correctly. Is there a method to streamline this code for ...

angulartypescript

Develop a versatile factory using Typescript

For my current project, I am developing a small model system. I want to allow users of the library to define their own model for the API. When querying the server, the API should return instances of the user's model. // Library Code interface Instanc ...

typescripttypescript1.6typescript1.7

What is the most efficient method to retrieve an API in Angular?

Recently, I dedicated some time to a personal Angular project. While working on it, I decided to experiment with making an API call to PokeAPI in order to retrieve the .svg image of a Pokemon along with its name. After successfully implementing this featur ...

angulartypescript

When trying to run ionic serve, I encountered the following error: "[ERROR] ng has unexpectedly closed with an exit code of 127."

My attempt to launch an ionic app on my Mac has hit a roadblock. While running npm install for the dependencies, everything goes smoothly without any issues. However, when I try to run 'ionic serve' or 'ionic s', an error crops up: [ng] ...

javascriptangulartypescriptnpmionic-framework

Issue with Angular 2 in Visual Studio 2013: Pressing Ctrl+K+D causes formatting to change to lowercase

Please note that while this issue is not directly related to Angular2, anyone who uses Angular2 with Visual Studio 2013 may be able to help. Whenever I use the key combination Ctrl + K + D in Visual Studio 2013, it changes HTML or Angular2 directives/mark ...

visual-studio-2013angular

The vertical scrolling feature seems to be malfunctioning within my angular 10 application

I'm having an issue with the scrollbar not working on this Angular 10 template, even after adding the CSS style overflow: auto; to the main container. Although I've included the overflow property in the main container "cont" as shown in the HTML ...

htmlcssangular

Guide on updating a property key in Firebase real-time database with Angular 7

Is it possible to modify the key of a property in my firebase database that I have been struggling with? ...

angulardatabasefirebase

'value' is connected to every single hook

Every time I try to save my work using any hook, the 'value' field changes automatically. This has been causing me a great deal of stress. I would be extremely grateful if someone could assist me with this issue. click here for image description ...

reactjstypescriptnext.js