Bacancy Bacancy
  • Customers

      Fortune 500 Clients

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

      Technologies

      React JS VueJS Angular JS React Native Flutter Full Stack
      Ruby on Rails Node JS Golang AI & ML Data Science 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 AC Charger Explore All

      not list

      CCS2 Controller DC Fast Charger AC Charge Controller
      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

1050+

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
    • AC Charger
    • DC Fast Charger
    • AC Charge Controller
    • 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

    Angular with AWS Combination
    Ritwik Verma
    Vivek Chhatbar

    January 23, 2023

    AngularJS

    All You Need To Know About Angular With AWS Combination

    By : Ritwik Verma & Vivek Chhatbar

    Quick Summary: Every business owner, whether small or large, explicitly wants what's best for their business. Considering this approach, one thing that is taking a...

    15 Minute Read
    Read More
    New Features of Angular 15
    Ritwik Verma

    November 30, 2022

    AngularJS

    What’s New in Angular 15: Deep Dive into Latest Features of Angular 15

    By : Ritwik Verma

    Quick Summary: The latest version of the most demanded front-end framework, Angular, is here with its latest release Angular 15. This year the Angular Team...

    6 Minute Read
    Read More
    Why use Angular
    Paridhi Wadhwani

    November 29, 2022

    AngularJS

    Why Use Angular in 2023? [For Entrepreneurs & Programmers]

    By : Paridhi Wadhwani

    Quick Summary: Angular has become the first choice of young entrepreneurs who want to modernize their business and make it approachable to the GenZ audience....

    14 Minute Read
    Read More

    india India (HQ)

    Corporate House
    15-16, Times Corporate Park, Thaltej, Ahmedabad, Gujarat 380059

    USA USA

    601 Brickell Key Drive, Suite 700, Miami, Florida, 33131, USA

    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]


    • Bacancy Behance
    • Bacancy Uplabs
    • Bacancy Pinterest
    • Brochure
    • Quality Assurance
    • Resources
    • Tutorials
    • Customer Reviews
    • Privacy Policy
    • FAQs
    • Contact Us
    • Sitemap
    • 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