Bacancy Bacancy
  • Customers

      Fortune 500 Clients

      Verizon
      Verizon
      The Container Store
      The Container Store
      KPMG
      KPMG
      Academy Sports & Outdoors
      Academy Sports & Outdoors
      Bangkok Bank Ltd
      Bangkok Bank Ltd
      The Children's Place
      The Children's Place
      Edward Jones
      Edward Jones
      Franklin Templeton
      Franklin Templeton
      AdviceWorks
      AdviceWorks
      NatWest Markets
      NatWest Markets
      Bridgestone
      Bridgestone
      United Parcel Service
      United Parcel Service

      Technologies

      React JS VueJS Angular JS React Native Flutter Full Stack
      Ruby on Rails Node JS Golang PHP AI & ML Java
      Python Salesforce DevOps Block Chain Mobile App Embedded & Hardware
      Explore All
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • what we do

      Experience

      Digital Workplace Services Product Enhancement

      Insights

      AI & Automation Data Analytics

      Innovate

      Blockchain Software Engineering Services Internet of Things (IoT) Data Science Artificial Intelligence Machine Learning

      Accelerate

      Agile & DevOps Cloud - Bacancy Combalt Digital Process Automation Open Source Microsoft Dynamics Salesforce

      Assure

      Quality Assurance IT Staff Augmentation

      Embedded & Hardware

      Product Engineering Analog Design Services FPGA Engineering Service Wireless Design Embedded Software Design

      not list

      Hardware Engineering Power Engineering IoT Hardware
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • who we work with

      Industries

      Banking Financial services & Insurance Startups Oil & Gas

      not list

      Healthcare Life Science Real Estate & Construction Logistics
      bacancy

      Let’s grow together Partner with us

      get quote
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • about us

      Culture

      Agile Mindset Bacancy Values Bacancy Culture

      About Company

      About Us Leadership Team Awards & Recognition Infrastructure

      not list

      Customer Reviews Our Locations Partnership Media Coverage

      WE ARE

      GREAT PLACE TO WORK - CERTIFIEDTM

      Building and sustaining High-Trust, High-Performance CultureTM

      Bacancy Great Place to Work
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • technology

      Front End

      Angular Reactjs Vue.js UI/UX

      Platforms

      MS Dynamics Salesforce

      Back End

      Ruby on Rails Node.js Golang Laravel .NET Java Python

      Mobile

      React Native Flutter Android iOS

      Cloud

      AWS DevOps

      QA

      Automation Testing Software Testing

      Embedded & Hardware

      Embedded
      bacancy

      World-class expertise,Delivered

      get quote
      Explore All
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • PRODUCTS

      EV Products

      Battery Management System Motor Controller CCS2 Controller Explore All

      not list

      BMS Manufacturers and Suppliers DC Fast Charger
      bacancy

      Let’s grow together Partner with us

      get quote
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
hire us

Bacancy

Bacancy represents the connected world, offering innovative and customer-centric information technology experiences, enabling Enterprises, Associates and the Society to Rise™.

12+

Countries where we have happy customers

800+

Agile enabled employees

06

World wide offices

10+

Years of Experience

05

Agile Coaches

14

Certified Scrum Masters

1000+

Clients projects

1458

Happy customers

  • Customers
      Technologies
      • React JS
      • Angular JS
      • Vue JS
      • Node JS
      • AI & ML
      • Explore All
      Fortune 500 Clients
      • Verizon
      • The Container Store
      • KPMG
      • Academy Sports & Outdoors
      • Bangkok Bank Ltd
      • The Children's Place
      • Edward Jones
      • Franklin Templeton
      • AdviceWorks
      • NatWest Markets
      • Bridgestone
      • United Parcel Service
  • What we do
      Experience
      • Digital Workplace Services
      • Product Enhancement
      Insights
      • AI & Automation
      • Data Analytics
      Innovate
      • Blockchain
      • Software Engineering Services
      • Internet of Things (IoT)
      Accelerate
      • Agile & DevOps
      • Cloud - Bacancy Combalt
      • Digital Process Automation
      • Open Source
      • Microsoft Dynamics
      • Salesforce
      • Service Experience Transformation
      Assure
      • Testing
      • Resource Augmentation
      Embedded & Hardware
      • Product Engineering
      • Analog Design Services
      • FPGA Engineering Service
      • Wireless Design
      • Embedded Software Design
      • Hardware Engineering
      • Power Engineering
      • IoT Hardware
      • AL/ML
  • who we work with
      Industries
      • Banking Financial services & Insurance
      • Startups
      • Oil & Gas
      • Healthcare Life Science
      • Real Estate & Construction
      • Logistics
  • About Us
      About Company
      • About Us
      • Leadership Team
      • Awards & Recognition
      • Infrastructure
      • Our Locations
      • Partnership
      Culture
      • Agile Mindset
      • Bacancy Values
      • Bacancy Culture
  • Technology
      Front End
      • Angular
      • Reactjs
      • Vue.js
      • UI/UX
      Platforms
      • MS Dynamics
      • Salesforce
      Back End
      • Ruby on Rails
      • Node.js
      • Golang
      • Laravel
      • .NET
      • Java
      • Python
      Mobile
      • React Native
      • Flutter
      • Android
      • iOS
      Cloud
      • AWS
      • DevOps
      QA
      • Automation Testing
      • Software Testing
      Embedded & Hardware
      • Embedded
      Explore All
  • Products
    • Battery Management System
    • Motor Controller
    • CCS2 Controller
    • BMS Manufacturers and Suppliers
    • DC Fast Charger
    • Explore All
  • Careers
  • Work @ Bacancy
  • Blogs
  • Resources
  • Customer Reviews
  • Contact
  • Get Quote
Http Interceptors in Angular

A Comprehensive Guideline on What are Angular HTTP Interceptors and How to Use Them

Parth Sardhara
Parth Sardhara Software Engineer
Last Updated on September 24, 2021
February 19, 2020 6 min read

This blog is all about Interceptor. In this blog, you will learn many things about the Interceptor for angular and how to use it in your existing Angular project. I am delighted to share my knowledge, so let’s dig in.

Here you go.

Interceptor is one of the essential features of Angular. Being an Angular developer, I need to learn about the things that are related to Angular.

Table of Contents to be covered:-

(1) Introduction of Interceptor.

(2) Implement Interceptor in Angular.

  • Create an Injectable service file and implement the HttpInterceptor interface.
  • Import inside the providers’ array inside the app.module.ts.
  • Create Fake Http request for checking of the interceptor.

(3) How to use Multiple Interceptors in Ng8.

(4) Use Case of Interceptor.

  • Manipulating the URL
  • Loader
  • Converting or Fake backend
  • Headers
  • Notifications
  • Errors
  • Authentication
  • Code optimization

(5) Important link

1. Introduction of Interceptor.

Basically, Interceptors are like if you want to keep your eyes in each and every API call, then you must use Intercepto.

Basically, the interceptor used to handle an HttpRequest or HttpResponse.

It is not precisely a middleware but we can say it is middleware.

Introduction of Interceptor.

Interceptor is like if you want to perform something when you are calling API, then you can use Interceptor.

But having many things can be done by using an interceptor.

2. How to Implement Interceptor in Angular?

Let’s start the session:-

To implement an interceptor, we need to create 1 file and provide it in-app modules…

Create an Injectable service file and implement the HttpInterceptor interface.

Create a Typescript file inside the src folder called alert-interceptor.ts and write the below code inside that file. We can say This is the basic code required or format of that file.

HttpInterceptor

Import inside the providers’ array inside the app.module.ts.

Now add this file into the app.module.ts inside the providers’ array, as shown in the below image.

app.module.ts.

Now the interceptor is working; you can test on using fake API calls like.

Create a Fake Http request for checking of the interceptor.

Below is the basic setup for more comfortable with this blog and for more understanding, so just write below code, then we will go forward.

Create a service which is for loader call loader.service.ts

Now go to the terminal and write the below command.
Command: – ng g s loader

The above command will create a loader service, and then we can use it in our app.component.ts.

ng g s loader

App.component.ts

App.component.ts

App.component.html

App.component.html

And once you click on API, you will see the console.log of req into the interceptor.

Output:

req into the interceptor

3. How to use Multiple Interceptors in Ng8?

:- YES
:- For that, we need to repeat the above process
:- Need to create a new typescript file for the interceptor
:- Provide it into the app module provides Array.
:- Now you can use that interceptor too

4. Use Case of Interceptor.

There are many ways to use the interceptor in the project.

1. Manipulating the URL

Using the interceptor, we can Manipulate the URL from HTTP to https something like,

  const authorizedRequest = req.clone({
     url: req.url.replace("https://", "http://"),
   });

Add above code into alert-interceptor.ts

alert-interceptor.ts

After that, you can see HTTP instead of https into the network console

Output:

network console

2. Loader

Using the interceptor, we can show and remove loader for all the API calls at 1 place instead of writing the code on all the API calls.

 this.loaderService.show();
 
   return next.handle(req).pipe(
     finalize(() => this.loaderService.hide())
   );

Using the interceptor

Output:-

Output

3. Converting or Fake backend

Using the interceptor, we can modify the response.

Converting or Fake backend

Output:

Fake backend

4. Headers

Using the interceptor, we add our custom headers too.

Headers

Output:

custom headers2

5. Notifications

Using the interceptor, we can show notification based on the status code or responses.

Notifications

Output

output2

6. Errors

Using the interceptor, we can show an error, which is like internal server error or something.

Errors

Output

output3

7. Authentication

Add bearer token…

Using the interceptor, we can add a token for identifying or maintaining the session of the user.

We just need to write the single code time and only at 1 place instead of writing code for every API.

Authentication

Output

Output

8. Code optimization

Interceptor also works as a code optimization….

As we learn in this blog, we just need to write the code related to Token, Header, notification for internal server error, Show spinner while waiting for Response, and many more. So in that case using an interceptor, we just need to write the code only inside the interceptor file instead of writing the code for every API.

Important link:

Github repository:- github.com/parthsardhara/NG-Interceptor
Stackblitz Link:- http://stackblitz.com/github/parthsardhara/NG-Interceptor

For the project setup:

(1) Go to the terminal and clone the project.

  • git clone https://github.com/parthsardhara/Interceptor-Demo.git
  • (2) go inside the folder and install node packages.

  • npm install / sudo npm install
  • (3) run the angular project

  • ng serve / sudo ng serve
  • So, this is all about the interceptor. I hope it will be helpful. In case you are planning to hire Angular developers to identify what other possibilities could be explored, then get in touch with us today.

    If a case of doubts, feel free to comments below.

    By the Way Angular Moves to Ivy, did you get the chance to have a look at what’s new in Angular Ivy version 9?

    I will definitely assist you with that. See you in the next blog.

    Have a good day.


    Expand Your Digital Horizons With Us.

    Start a new project or take an existing one to the next level. Get in touch to start small, scale-up, and go Agile.


    Or
    E-mail us : [email protected]

    Your Success Is Guaranteed !

    Related Articles

    Whats new in Angular 14
    Aayush Gairola

    June 13, 2022

    AngularJS

    What’s New in Angular 14?

    By : Aayush Gairola

    Quick Summary: The Google-developed framework - Angular has released its latest v14 update with stand-alone components, optional NGmodules, typed reactive forms, and better template diagnostics....

    6 Minute Read
    Read More
    Angular Performance Optimization
    Mrinal Saraswat

    May 31, 2022

    AngularJS

    Ultimate Guide to Angular Performance Optimization in 2022

    By : Mrinal Saraswat

    Quick Summary: Angular is the fourth highly used framework for application development. It brings scalability, reliability, and security to your web and mobile application. To...

    6 Minute Read
    Read More
    Cypress Automation Testing Tutorial
    Archita Nayak
    Parth Sardhara

    May 9, 2022

    AngularJS

    Cypress Automation Testing Tutorial (Part 1)

    By : Archita Nayak & Parth Sardhara

    Introduction We build a good website using different technologies such as React, Angular, and other modern technologies. In terms of testing, the client wants to...

    5 Minute Read
    Read More

    How Can We Help You?

    india India (HQ)

    1207-1210, Time Square, Thaltej-Shilaj Road, Ahmedabad

    USA USA

    4995 NW 72nd Ave, Suite 307 Miami, FL 33166

    canada Canada

    71 Dawes Road, Brampton, On L6X 5N9, Toronto

    australia-flag Australia

    351A Hampstead Rd, Northfield SA 5085

    UAE UAE

    1608 Clover Bay, Business Bay, Dubai, UAE. PO Box 62049

    sweden Sweden

    Junkergatan 4, 126 53 Hagersten


    Great Place to Work

    Get in Touch

    call-yellow-icon

    Contact Number

    +1 347 441 4161

    gmail-icon

    Email Us

    [email protected]


  • Brochure
  • Quality Assurance
  • Resources
  • FAQs
  • Customer Reviews
  • Tutorials
  • Privacy Policy
  • Sitemap
  • Contact Us
  • Employee
  • bacancy google review 4.6
    bacancy google review
    bacancy glassdoor review 4.5
    bacancy glassdoor review
    bacancy clutch review 4.8
    bacancy clutch review
    bacancy goodfirms review 4.5
    bacancy goodfirms review
    X

    Get Our Newsletter

    Be The First To Get The Latest Updates And Tutorials.

    Request A Free Consultation