Show a notification pop-up when a observable encounters an error in an IONIC 3 app connected to an ASP.NET

Currently, I am in the process of developing an IONIC 3 application that consumes Asp.NET web API services. For authentication purposes, I have implemented Token based auth. When a user enters valid credentials, they receive a token which is then stored in the FireBase database. Conversely, if invalid credentials are entered, a toast message displaying an error is shown.

Although I am successfully receiving responses from the Observable, including both tokens and errors, I would like to enhance the user experience by displaying a toast specifically for bad credentials.

Given my limited experience with Rxjs and reactive programming, I am seeking advice on how to seamlessly integrate code for showing the toast within the subscribe method as illustrated below:

logUser(){
      this.loginService.login(this.loginModel.userName,this.loginModel.password,this.loginModel.grant_type)
        .subscribe(token => {this.Token= token ,
                            console.log(this.Token.access_token)},
                              error => this.errorMessage = <any>error);      
         //<any>this.toast.create(this.toastOptions).present()             
      }

Answer №1

I've adjusted the formatting of your code to highlight where you should display a toast message for both successful and error scenarios:

logUser(){
    this.loginService.login(this.loginModel.userName,this.loginModel.password,this.loginModel.grant_type)
        .subscribe(
            token => {
                this.Token = token;
                console.log(this.Token.access_token);

                // Display a toast message for successful token retrieval here!
                // ...
            },
            error => {
                this.errorMessage = (<any>error);

                // Display a toast message for errors here!
                // ...

            });      
}

Since the subscribe function is asynchronous, it's important to handle success and error cases separately within their respective callbacks (token => { ... } and error => { ...}).

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

Deleting elements from an array of objects in Angular Would you like help with

I have a JSON structure and I need to remove the entire StartGeotag object from the array. [{ CreatedDate: "2022-02-17T10:30:07.0442288Z" DeletedDate: null ProjectId: "05b76d03-8c4b-47f4-7c20-08d9e2990812" StartGeotag: { ...

Attempting to integrate WebdriverIO into an Angular Electron application

Context: Currently, I am in the process of implementing the fundamental WebdriverIO example within an Angular Electron App. My application is built on the foundation of the Angular Electron Boilerplate. To set up, I have installed webdriverio and @types/we ...

Having difficulty disassociating the radio button from the label

<div class="questions" style="font-size:13pt;margin-left:20px;margin-bottom:10px;"> <p class="question" id="ques{{i+1}}" style="font-size:17pt;font-weight:normal">{{i+1+". "+a.question}}</p> <img *ngIf="isImage[i]" [src]="a.image" ...

Measuring Feedback: Utilizing Angular 4 to calculate review ratings

I'm facing a challenge while working on a review form using Firebase and Angular 4. The issue is with calculating the total length of added reviews and the sum of their ratings. Each time a new review is submitted, it gets pushed to a list of objects ...

When the value of a Formcontrol is changed using valueAccessor.writeValue(), it remains unchanged

Encountering a similar issue as seen in this stack overflow post, but the solution provided isn't resolving the issue. Perhaps you can offer assistance on that thread. In my scenario, I have created a directive for formatting phone numbers: import { ...

Issues with routerLinkActive

On my page, I have a menu that uses the routerLinkActive attribute to add a green background when a link is active and grey when it's not. However, I'm facing an issue where the bg-success class is added but doesn't overwrite the bg-dark cla ...

How to use TypeScript to filter an array based on the values of another array

Suppose I have two arrays. The first one looks like this: names: [{ value: 'recordedData', desc: 'Data' } { value: 'recordedNumbers', desc: 'numbers' } { value: 'recordedNames', desc: 'name ...

Using Threejs to create an elbow shape with specified beginning and ending radii

I'm a beginner in Threejs and I'm attempting to create an elbow shape along a curved path with varying begin_radius and end_radius, using the curve_radius and an angle. However, I haven't been successful in achieving the desired results. C ...

transmit URL parameters to Express using Angular 2

I have implemented an Angular service to retrieve data from Express: getRestaurants(districtId) : Observable<void[]>{ let params: URLSearchParams = new URLSearchParams(); params.set('id', districtId); return this.http.get(this.url, ...

Tips on informing the TS compiler that the value returned by a custom function is not null

There might be a way to make this code work in TypeScript, even though it's currently showing some errors regarding possible undefined values. Take a look at the code snippet: const someArray: foo[] | null | undefined = [...] // TS fail: someArray ...

Chrome reports "404 Not Found error: Cannot GET /" while using Angular 4 with Observable functions

I recently implemented observable data in my service, and it significantly improved the functionality of the application. https://i.sstatic.net/9h0KH.jpg This is an overview of my Service: import { Injectable } from '@angular/core'; import { H ...

Sending data from parent component to change MUI Button color (React with typescript)

Recently, I've been integrating MUI (v5) into a create-React-App with typescript. I have a custom theme set up as well. My goal is to develop a MyButton Component that accepts a buttonType prop (of type string), which corresponds to my theme.palette, ...

Is it possible for OpenFin to store logs in a secure database and what is the process for accessing logs located at %LocalAppData%openfinapps<app>app.log

System Information Here are the details of the system setup: OpenFin Process Manager Version: RVM = 8.1.0.4 Node.js: v16.15.0 Windows 10 Angular Application with C# .NET backend Issue: The current setup saves all application logs locally on users' ...

Monitoring changes within the browser width with Angular 2 to automatically refresh the model

One of the challenges I faced in my Angular 2 application was implementing responsive design by adjusting styles based on browser window width. Below is a snippet of SCSS code showing how I achieved this: .content{ /*styles for narrow screens*/ @m ...

Tips for updating routerlink in navigation bar in Angular 4

I'm encountering an issue with routing to the wrong routelink. How can I prevent this from happening? My apologies for my lack of experience. The error message displayed in the Chrome console is: ERROR Error: Uncaught (in promise): Error: Cannot mat ...

unable to reinstall due to removal of global typing

After globally installing Moment typing with the command typings install dt~moment --save --global Checking the installed typings using typings list shows: ├── <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="93fffcf7f2e0 ...

"Encountering issues with NPM run build not working during Docker build process

Encountering an error while running docker build is causing frustration. Docker runs npm install -f, and changing it to npm install did not solve the problem. The lengthy logs cannot be posted here, but can be viewed in detail here. Here's a snippet o ...

Ways to verify whether a checkbox is selected and store the status in the LocalStorage

Hey there, I'm still new to the world of programming and currently just a junior developer. I have a list of checkboxes and I want to save any unchecked checkbox to my local storage when it's unselected. Below is a snippet of my code but I feel l ...

How can we simultaneously execute multiple HTTP requests in Angular 6 by leveraging the power of forkJoin and ngrx?

Current Situation In the realm of my angular6 application, I find myself juggling three distinct categories: catA, catB, and catC. Each of these categories requires data retrieval from 3 separate APIs. Upon selecting any category, the CategoryDetailsCompo ...

Increasing response buffer size in Node.js fetch for version 2.x.x

Currently in the process of implementing an API request using nodejs-fetch and I've encountered an issue. The documentation states that the maximum buffer size for fetch is 16kB, but the response I need to retrieve is 53 kB. This causes the .fetch() f ...