Skip to main content

Posts

Showing posts from April, 2019

Angular 7: A loading indicator for all API calls.

You users don't like when there is no indication from the application about what is happening. For example when you are loading data from the API and user has no clue about what is happening. I like displaying a small loading icon somewhere at the top to keep the aware about the application state. To display a small loading indicator at the top of the screen for all API calls untill they return back we can write a small service, an interceptor and a component. I like something like the following Following is a very simple interceptor import {Injectable} from '@angular/core' ; import {HttpEvent, HttpEventType, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http' ; import {Observable} from 'rxjs' ; import { tap } from 'rxjs/operators' ; import {LoadingService} from './loading.service' ; @Injectable () export class LoadingInterceptor implements HttpInterceptor { constructor ( private loadingService : LoadingServ

Angular 7: Intercepting HTTP call to handle API errors.

Error handling is one of the most cruicial but neglected item of frontend development. There are number of errors that can happen on frontend and they are of different types. Following are different types of errors that our users can encounter Javascript errors e.g when you divide a number by a dynamic input and the input is 0 Errors in calling server APIs. I want to discuss the server errors in this article. When we call an API there can be several problems, for example on a login authentication form when you call your server API to authenticate user, you can have following possibilities The device has lost internet connection The code on server is not working properly You have made a typo in the API end point name The user account is not valid and server returns an error code or an error status All these scenarios must be handled and gracefully inform the user about the error with a suggestion to recover from the error state. Obviously you cannot write code in all