{"id":7155,"date":"2022-03-10T15:33:14","date_gmt":"2022-03-10T10:03:14","guid":{"rendered":"https:\/\/www.innovationm.com\/blog\/?p=7155"},"modified":"2022-03-10T15:34:06","modified_gmt":"2022-03-10T10:04:06","slug":"interceptor-in-angular","status":"publish","type":"post","link":"https:\/\/www.innovationm.com\/blog\/interceptor-in-angular\/","title":{"rendered":"Interceptor in Angular"},"content":{"rendered":"

What is an interceptor in angular?<\/strong><\/p>\n

Interceptors are a unique type of Angular Service that we can implement. Interceptors allow us to intercept incoming or
\noutgoing HTTP requests using the HttpClient. By intercepting the HTTP request, we can modify or change the value of the
\nrequest.
\nInterceptors are basic building blocks for Angular service so that we can implement them. Interceptors are allowed us to intercepts our incoming or outgoing HTTP requests using the Clients.
\nwe can easily modify and change the value of its requests.<\/p>\n

There are we have 3 different Interceptors Implementations:<\/strong><\/p>\n

Handling HTTP Headers
\nHTTP Response Formatting
\nHTTP Error Handling<\/p>\n

What is the reason we have to use interceptors in our applications?<\/strong><\/p>\n

with the help of interceptors, we can easily use the features like caching & logging. Interceptors always work with each and every request and response.<\/p>\n

We have always 2 arguments, req&next& returns observable of type Httpevent.<\/p>\n

req- is itself request object type & of the type HTTP request.<\/p>\n

next-is the HTTP Handler, of type HTTP Handler.<\/p>\n

How do we modify requests with help of Interceptor?<\/strong><\/p>\n

As we know HTTP req.objects are immutable, so as we modify them, firstly we make a copy of that, then modify with that copy & call handler
\non the modified copy of that interceptor.<\/p>\n

Basic API implementation-<\/strong><\/p>\n

import { Injectable } from ‘@angular\/core’;
\nimport { HttpInterceptor, HttpEvent, HttpResponse, HttpRequest, HttpHandler } from ‘@angular\/common\/http’;
\nimport { Observable } from ‘rxjs’;<\/p>\n

@Injectable()
\nexport class MyInterceptor implements HttpInterceptor {
\nintercept(httpRequest: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
\nreturn next.handle(httpRequest);
\n}
\n}<\/p>\n

If we want to create an interceptor, we have a need for the HttpInterceptor interface from the @angular\/common\/http package. Each and every time our application gave an HTTP request using the HttpClient service, the Interceptor which calls the intercept() method.<\/p>\n

When this method is called Angular passes a reference to the httpRequest object. With this help and request, we can inspect this and modify the interceptor as necessary. Once we complete our logic, we call next. Handle method and return the new request onto the application part.<\/p>\n

once our Interceptor is created, we have to register it as a multi-provider since there can be multiple interceptors running within an application. You must register the provider to the app.module for it to apply to all application HTTP requests.
\nInterceptors will only intercept requests that are made using the HttpClient service.<\/p>\n

import { NgModule } from ‘@angular\/core’;
\nimport { BrowserModule } from ‘@angular\/platform-browser’;
\nimport { HttpClientModule, HTTP_INTERCEPTORS } from ‘@angular\/common\/http’;
\nimport { RouterModule, Routes } from ‘@angular\/router’;<\/p>\n

import { MyInterceptor } from ‘.\/my.interceptor’;
\nimport { AppComponent } from ‘.\/app.component’;<\/p>\n

@NgModule({
\nimports: [BrowserModule, HttpClientModule],
\ndeclarations: [AppComponent],
\nbootstrap: [AppComponent],
\nproviders: [
\n{ provide: HTTP_INTERCEPTORS, useClass: MyInterceptor, multi: true }
\n]
\n})
\nexport class AppModule { }<\/p>\n

HTTP Header Interceptor<\/strong>
\nA request Feature is frequently used to return an API key to a validated API end – point. We can standardise our entire application by using interceptors to manage this immediately. Let’s create a simple use case in which an API header key is attached to each request.<\/p>\n

import { Injectable } from ‘@angular\/core’;
\nimport { HttpInterceptor, HttpEvent, HttpResponse, HttpRequest, HttpHandler } from ‘@angular\/common\/http’;
\nimport { Observable } from ‘rxjs’;
\nimport { map, filter } from ‘rxjs\/operators’;<\/p>\n

@Injectable()
\nexport class HeaderInterceptor implements HttpInterceptor {<\/p>\n

intercept(httpRequest: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
\nconst API_KEY = ‘123456’;
\nreturn next.handle(httpRequest.clone({ setHeaders: { API_KEY } }));
\n}
\n}
\nWe can use the replica process on the httpRequest object to adjust the request object and restore a replica. In this example, we attach the API KEY valuation as a header to every HTTP request using httpRequest.clone({ setHeaders: { API_KEY } }).<\/p>\n

Now let\u2019s use the HttpClient service to make a HTTP get request.<\/strong><\/p>\n

import { Component, OnInit } from ‘@angular\/core’;
\nimport { HttpClient } from ‘@angular\/common\/http’;
\nimport { Observable } from ‘rxjs’;
\nimport { tap } from ‘rxjs\/operators’;<\/p>\n

@Component({
\nselector: ‘app-header’,
\ntemplate: `
\n<h2>Header Example<\/h2>
\n<pre>{{ data | json }}<\/pre>
\n`
\n})
\nexport class HeaderComponent implements OnInit {
\noutput: {};
\nconstructor(private httpClient: HttpClient) { }<\/p>\n

ngOnInit() {
\nthis.httpClient.get(‘\/assets\/header.json’).subscribe(data => this.output = output);
\n}
\n}<\/p>\n","protected":false},"excerpt":{"rendered":"

What is an interceptor in angular? Interceptors are a unique type of Angular Service that we can implement. Interceptors allow us to intercept incoming or outgoing HTTP requests using the HttpClient. By intercepting the HTTP request, we can modify or change the value of the request. Interceptors are basic building blocks for Angular service so […]<\/p>\n","protected":false},"author":1,"featured_media":7156,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[404],"tags":[396,722,751,757,739],"class_list":["post-7155","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","tag-angular","tag-blog","tag-blogs","tag-intercepter","tag-tech-blog"],"yoast_head":"\nInterceptor in Angular - InnovationM - Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.innovationm.com\/blog\/interceptor-in-angular\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Interceptor in Angular - InnovationM - Blog\" \/>\n<meta property=\"og:description\" content=\"What is an interceptor in angular? Interceptors are a unique type of Angular Service that we can implement. Interceptors allow us to intercept incoming or outgoing HTTP requests using the HttpClient. By intercepting the HTTP request, we can modify or change the value of the request. Interceptors are basic building blocks for Angular service so […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.innovationm.com\/blog\/interceptor-in-angular\/\" \/>\n<meta property=\"og:site_name\" content=\"InnovationM - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-10T10:03:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-03-10T10:04:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/03\/Interceptor-in-angular-1024x576.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"576\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InnovationM Admin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InnovationM Admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/interceptor-in-angular\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/interceptor-in-angular\\\/\"},\"author\":{\"name\":\"InnovationM Admin\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"headline\":\"Interceptor in Angular\",\"datePublished\":\"2022-03-10T10:03:14+00:00\",\"dateModified\":\"2022-03-10T10:04:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/interceptor-in-angular\\\/\"},\"wordCount\":688,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/interceptor-in-angular\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/Interceptor-in-angular.png\",\"keywords\":[\"angular\",\"blog\",\"blogs\",\"intercepter\",\"tech blog\"],\"articleSection\":[\"Angular\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/interceptor-in-angular\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/interceptor-in-angular\\\/\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/interceptor-in-angular\\\/\",\"name\":\"Interceptor in Angular - InnovationM - Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/interceptor-in-angular\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/interceptor-in-angular\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/Interceptor-in-angular.png\",\"datePublished\":\"2022-03-10T10:03:14+00:00\",\"dateModified\":\"2022-03-10T10:04:06+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/interceptor-in-angular\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/interceptor-in-angular\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/interceptor-in-angular\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/Interceptor-in-angular.png\",\"contentUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/Interceptor-in-angular.png\",\"width\":3556,\"height\":2000},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/interceptor-in-angular\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Interceptor in Angular\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\",\"name\":\"InnovationM - Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\",\"name\":\"InnovationM Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"caption\":\"InnovationM Admin\"},\"sameAs\":[\"http:\\\/\\\/www.innovationm.com\\\/\"],\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/author\\\/innovationmadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Interceptor in Angular - InnovationM - Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.innovationm.com\/blog\/interceptor-in-angular\/","og_locale":"en_US","og_type":"article","og_title":"Interceptor in Angular - InnovationM - Blog","og_description":"What is an interceptor in angular? Interceptors are a unique type of Angular Service that we can implement. Interceptors allow us to intercept incoming or outgoing HTTP requests using the HttpClient. By intercepting the HTTP request, we can modify or change the value of the request. Interceptors are basic building blocks for Angular service so […]","og_url":"https:\/\/www.innovationm.com\/blog\/interceptor-in-angular\/","og_site_name":"InnovationM - Blog","article_published_time":"2022-03-10T10:03:14+00:00","article_modified_time":"2022-03-10T10:04:06+00:00","og_image":[{"width":1024,"height":576,"url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/03\/Interceptor-in-angular-1024x576.png","type":"image\/png"}],"author":"InnovationM Admin","twitter_misc":{"Written by":"InnovationM Admin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.innovationm.com\/blog\/interceptor-in-angular\/#article","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/interceptor-in-angular\/"},"author":{"name":"InnovationM Admin","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"headline":"Interceptor in Angular","datePublished":"2022-03-10T10:03:14+00:00","dateModified":"2022-03-10T10:04:06+00:00","mainEntityOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/interceptor-in-angular\/"},"wordCount":688,"commentCount":0,"image":{"@id":"https:\/\/www.innovationm.com\/blog\/interceptor-in-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/03\/Interceptor-in-angular.png","keywords":["angular","blog","blogs","intercepter","tech blog"],"articleSection":["Angular"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.innovationm.com\/blog\/interceptor-in-angular\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.innovationm.com\/blog\/interceptor-in-angular\/","url":"https:\/\/www.innovationm.com\/blog\/interceptor-in-angular\/","name":"Interceptor in Angular - InnovationM - Blog","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/interceptor-in-angular\/#primaryimage"},"image":{"@id":"https:\/\/www.innovationm.com\/blog\/interceptor-in-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/03\/Interceptor-in-angular.png","datePublished":"2022-03-10T10:03:14+00:00","dateModified":"2022-03-10T10:04:06+00:00","author":{"@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"breadcrumb":{"@id":"https:\/\/www.innovationm.com\/blog\/interceptor-in-angular\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.innovationm.com\/blog\/interceptor-in-angular\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.innovationm.com\/blog\/interceptor-in-angular\/#primaryimage","url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/03\/Interceptor-in-angular.png","contentUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/03\/Interceptor-in-angular.png","width":3556,"height":2000},{"@type":"BreadcrumbList","@id":"https:\/\/www.innovationm.com\/blog\/interceptor-in-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.innovationm.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Interceptor in Angular"}]},{"@type":"WebSite","@id":"https:\/\/www.innovationm.com\/blog\/#website","url":"https:\/\/www.innovationm.com\/blog\/","name":"InnovationM - Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.innovationm.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed","name":"InnovationM Admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","caption":"InnovationM Admin"},"sameAs":["http:\/\/www.innovationm.com\/"],"url":"https:\/\/www.innovationm.com\/blog\/author\/innovationmadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/7155","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/comments?post=7155"}],"version-history":[{"count":0,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/7155\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media\/7156"}],"wp:attachment":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media?parent=7155"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/categories?post=7155"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/tags?post=7155"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}