{"id":10179,"date":"2023-04-10T08:19:08","date_gmt":"2023-04-10T08:19:08","guid":{"rendered":"https:\/\/www.blusailtechnologies.com\/how-to-use-an-interceptor-in-angular-with-signals-and-standalone-components-to-display-a-dynamic-loader\/"},"modified":"2026-04-13T14:04:02","modified_gmt":"2026-04-13T14:04:02","slug":"how-to-use-an-interceptor-in-angular-with-signals-and-standalone-components-to-display-a-dynamic-loader","status":"publish","type":"post","link":"https:\/\/www.blusailtechnologies.com\/en\/how-to-use-an-interceptor-in-angular-with-signals-and-standalone-components-to-display-a-dynamic-loader\/","title":{"rendered":"How to Use an Interceptor in Angular with Signals and Standalone Components to Display a Dynamic Loader"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"10179\" class=\"elementor elementor-10179 elementor-8435\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6a09389 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6a09389\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-523d815\" data-id=\"523d815\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9b91692 elementor-widget elementor-widget-text-editor\" data-id=\"9b91692\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>With the introduction of <strong>Angular 17<\/strong> and new features like <strong>Signals<\/strong> and <strong>Standalone Components<\/strong>, state management and application structure have become simpler and more reactive. In this guide, I will show you how to implement an <strong>HTTP interceptor<\/strong> to display a dynamic loader during HTTP calls, leveraging <strong>Signals<\/strong> for state management and <strong>Standalone Components<\/strong> for a leaner structure.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cf0f657 elementor-widget elementor-widget-heading\" data-id=\"cf0f657\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">1. Create a Loader Service with Signals<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-76d8e47 elementor-widget elementor-widget-text-editor\" data-id=\"76d8e47\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Let\u2019s start by creating a service that uses <strong>Signals<\/strong> to manage the loader\u2019s state.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a231d37 elementor-widget elementor-widget-heading\" data-id=\"a231d37\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Step 1: Generate the Service<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9963ec7 elementor-widget elementor-widget-text-editor\" data-id=\"9963ec7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Run the following command:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5c1682e codice-blusail elementor-widget elementor-widget-html\" data-id=\"5c1682e\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\" class=\" language-css\">\n    ng generate service loader\n  <\/code><\/pre><style>pre code {\n    background: none;\n    white-space: pre;\n    display: block;\n    max-width: 100%;\n    min-width: 100px;\n    font-size: 16px;\n    padding: 15px 20px 12px 22px;\n    line-height: 1.75;\n}\n\ncode {\n    font-size: inherit;\n    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;\n}\n\npre {\n    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;\n    clear: both;\n    color: #fff;\n    background: #1b1b1b;\n    padding: 0;\n    -moz-tab-size: 2;\n    -o-tab-size: 2;\n    tab-size: 2;\n    -ms-word-break: normal;\n    word-break: normal;\n    -webkit-hyphens: none;\n    -ms-hyphens: none;\n    hyphens: none;\n    position: relative;\n    line-height: 28px;\n    border-radius: 8px;\n    overflow: hidden;\n} \n  <\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f40af36 elementor-widget elementor-widget-heading\" data-id=\"f40af36\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Step 2: Implement the Service with Signals<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-afbfe40 elementor-widget elementor-widget-text-editor\" data-id=\"afbfe40\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In the loader.service.ts file, use signals to manage the loader state:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7110bea codice-blusail elementor-widget elementor-widget-html\" data-id=\"7110bea\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\">\n  <code markup=\"tt\" class=\" language-css\">\n\n  import { Injectable, signal } from '@angular\/core';\n  \n  @Injectable({\nprovidedIn: 'root'\n})\nexport class LoaderService {\nisLoading = signal&lt;boolean&gt;(false);\n\nshow(): void {\nthis.isLoading.set(true);\n}\n\nhide(): void {\nthis.isLoading.set(false);\n}\n}\n  <\/code>\n  \n<\/pre>\n\n  <style>\n    pre code {\n    background: none;\n    white-space: pre;\n    display: block;\n    max-width: 100%;\n    min-width: 100px;\n    font-size: 16px;\n    padding: 15px 20px 12px 22px;\n    line-height: 1.75;\n}\n\ncode {\n    font-size: inherit;\n    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;\n}\n\npre {\n    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;\n    clear: both;\n    color: #fff;\n    background: #1b1b1b;\n    padding: 0;\n    -moz-tab-size: 2;\n    -o-tab-size: 2;\n    tab-size: 2;\n    -ms-word-break: normal;\n    word-break: normal;\n    -webkit-hyphens: none;\n    -ms-hyphens: none;\n    hyphens: none;\n    position: relative;\n    line-height: 28px;\n    border-radius: 8px;\n    overflow: hidden;\n}\n  <\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8e7fe22 elementor-widget elementor-widget-heading\" data-id=\"8e7fe22\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">2. Create a Standalone Component for the Loader<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-360c0d1 elementor-widget elementor-widget-text-editor\" data-id=\"360c0d1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now, create a <strong>Standalone Component<\/strong> that displays the loader when isLoading is true.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-998fca5 elementor-widget elementor-widget-heading\" data-id=\"998fca5\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Step 1: Generate the Component<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3cf3989 elementor-widget elementor-widget-text-editor\" data-id=\"3cf3989\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Run the following command:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fe51cd8 codice-blusail elementor-widget elementor-widget-html\" data-id=\"fe51cd8\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\" class=\" language-css\">\n    ng generate component loader --standalone\n  <\/code><\/pre><style>pre code {\n    background: none;\n    white-space: pre;\n    display: block;\n    max-width: 100%;\n    min-width: 100px;\n    font-size: 16px;\n    padding: 15px 20px 12px 22px;\n    line-height: 1.75;\n}\n\ncode {\n    font-size: inherit;\n    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;\n}\n\npre {\n    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;\n    clear: both;\n    color: #fff;\n    background: #1b1b1b;\n    padding: 0;\n    -moz-tab-size: 2;\n    -o-tab-size: 2;\n    tab-size: 2;\n    -ms-word-break: normal;\n    word-break: normal;\n    -webkit-hyphens: none;\n    -ms-hyphens: none;\n    hyphens: none;\n    position: relative;\n    line-height: 28px;\n    border-radius: 8px;\n    overflow: hidden;\n}\n  <\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dd6a080 elementor-widget elementor-widget-heading\" data-id=\"dd6a080\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Step 2: Implement the Component<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f7675fb elementor-widget elementor-widget-text-editor\" data-id=\"f7675fb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In the loader.component.ts file, import the service and use isLoading to control the loader\u2019s visibility:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e3cfe17 codice-blusail elementor-widget elementor-widget-html\" data-id=\"e3cfe17\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\">\n  <code markup=\"tt\" class=\" language-css\">\n\nimport { Component, inject } from '@angular\/core';\nimport { LoaderService } from '.\/loader.service';\nimport { ProgressSpinnerModule } from 'primeng\/progressspinner';\n\n@Component({\nselector: 'app-loader',\nstandalone: true,\nimports: [ProgressSpinnerModule],\ntemplate: `\n@if (loaderService.isLoading()) {\n&lt;div class=\"loader-overlay\"&gt;\n&lt;div class=\"loader-spinner\"&gt;\n&lt;p-progressSpinner&gt;&lt;\/p-progressSpinner&gt;\n&lt;\/div&gt;\n&lt;\/div&gt;\n}\n`,\nstyles: [`\n.loader-overlay {\nposition: fixed;\ntop: 0;\nleft: 0;\nwidth: 100%;\n\nheight: 100%;\nbackground-color: rgba(0, 0, 0, 0.5);\ndisplay: flex;\njustify-content: center;\nalign-items: center;\nz-index: 9999;\n}\n\n.loader-spinner {\ncolor: white;\n}\n`]\n})\nexport class LoaderComponent {\nloaderService = inject(LoaderService);\n}\n  <\/code>\n  \n<\/pre>\n\n  <style>\n    pre code {\n    background: none;\n    white-space: pre;\n    display: block;\n    max-width: 100%;\n    min-width: 100px;\n    font-size: 16px;\n    padding: 15px 20px 12px 22px;\n    line-height: 1.75;\n}\n\ncode {\n    font-size: inherit;\n    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;\n}\n\npre {\n    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;\n    clear: both;\n    color: #fff;\n    background: #1b1b1b;\n    padding: 0;\n    -moz-tab-size: 2;\n    -o-tab-size: 2;\n    tab-size: 2;\n    -ms-word-break: normal;\n    word-break: normal;\n    -webkit-hyphens: none;\n    -ms-hyphens: none;\n    hyphens: none;\n    position: relative;\n    line-height: 28px;\n    border-radius: 8px;\n    overflow: hidden;\n}\n  <\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-00eb546 elementor-widget elementor-widget-heading\" data-id=\"00eb546\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">3. Create the HTTP Interceptor<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a5d3605 elementor-widget elementor-widget-text-editor\" data-id=\"a5d3605\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now, let\u2019s create the interceptor that will intercept all HTTP calls and update the loader state.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6ab619c elementor-widget elementor-widget-heading\" data-id=\"6ab619c\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Step 1: Generate the Interceptor<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3ab1a2b elementor-widget elementor-widget-text-editor\" data-id=\"3ab1a2b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Run the following command:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9e71598 codice-blusail elementor-widget elementor-widget-html\" data-id=\"9e71598\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\" class=\" language-css\">\n    ng generate interceptor loader\n  <\/code><\/pre><style>pre code {\n    background: none;\n    white-space: pre;\n    display: block;\n    max-width: 100%;\n    min-width: 100px;\n    font-size: 16px;\n    padding: 15px 20px 12px 22px;\n    line-height: 1.75;\n}\n\ncode {\n    font-size: inherit;\n    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;\n}\n\npre {\n    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;\n    clear: both;\n    color: #fff;\n    background: #1b1b1b;\n    padding: 0;\n    -moz-tab-size: 2;\n    -o-tab-size: 2;\n    tab-size: 2;\n    -ms-word-break: normal;\n    word-break: normal;\n    -webkit-hyphens: none;\n    -ms-hyphens: none;\n    hyphens: none;\n    position: relative;\n    line-height: 28px;\n    border-radius: 8px;\n    overflow: hidden;\n}\n  <\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fd34cc1 elementor-widget elementor-widget-heading\" data-id=\"fd34cc1\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Step 2: Implement the Interceptor<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fd99de1 elementor-widget elementor-widget-text-editor\" data-id=\"fd99de1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In the loader.interceptor.ts file, implement the logic to show and hide the loader:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-779f61b codice-blusail elementor-widget elementor-widget-html\" data-id=\"779f61b\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\">\n  <code markup=\"tt\" class=\" language-css\">\n\nimport { Injectable, inject } from '@angular\/core';\nimport {\nHttpRequest,\nHttpHandler,\nHttpEvent,\nHttpInterceptor\n\n} from '@angular\/common\/http';\nimport { Observable } from 'rxjs';\nimport { finalize } from 'rxjs\/operators';\nimport { LoaderService } from '.\/loader.service';\n\n@Injectable()\nexport class LoaderInterceptor implements HttpInterceptor {\nprivate loaderService = inject(LoaderService);\n\nintercept(request: HttpRequest&lt;unknown&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;unknown&gt;&gt; {\n\/\/ Mostra il loader\nthis.loaderService.show();\n\nreturn next.handle(request).pipe(\nfinalize(() =&gt; {\n\/\/ Nasconde il loader quando la richiesta \u00e8 completata\nthis.loaderService.hide();\n})\n);\n}\n}\n  <\/code>\n  \n<\/pre>\n\n  <style>\n    pre code {\n    background: none;\n    white-space: pre;\n    display: block;\n    max-width: 100%;\n    min-width: 100px;\n    font-size: 16px;\n    padding: 15px 20px 12px 22px;\n    line-height: 1.75;\n}\n\ncode {\n    font-size: inherit;\n    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;\n}\n\npre {\n    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;\n    clear: both;\n    color: #fff;\n    background: #1b1b1b;\n    padding: 0;\n    -moz-tab-size: 2;\n    -o-tab-size: 2;\n    tab-size: 2;\n    -ms-word-break: normal;\n    word-break: normal;\n    -webkit-hyphens: none;\n    -ms-hyphens: none;\n    hyphens: none;\n    position: relative;\n    line-height: 28px;\n    border-radius: 8px;\n    overflow: hidden;\n}\n  <\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-07a6289 elementor-widget elementor-widget-heading\" data-id=\"07a6289\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">4. Configure the Interceptor in a Standalone Application<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-139ee04 elementor-widget elementor-widget-text-editor\" data-id=\"139ee04\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>With Angular 17 and <strong>Standalone Components<\/strong>, the interceptor configuration is done directly in the main.ts or app.config.ts file.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f4acba1 elementor-widget elementor-widget-heading\" data-id=\"f4acba1\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Step 1: Configure the Interceptor in app.config.ts<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c9b669b elementor-widget elementor-widget-text-editor\" data-id=\"c9b669b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Create or modify the app.config.ts file to include the interceptor:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2a3fe56 codice-blusail elementor-widget elementor-widget-html\" data-id=\"2a3fe56\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\">\n  <code markup=\"tt\" class=\" language-css\">\n\nimport { ApplicationConfig, provideHttpClient, withInterceptorsFromDi } from '@angular\/common\/http';\nimport { provideRouter } from '@angular\/router';\nimport { routes } from '.\/app.routes';\nimport { HTTP_INTERCEPTORS } from '@angular\/common\/http';\n\nimport { LoaderInterceptor } from '.\/loader.interceptor';\n\nexport const appConfig: ApplicationConfig = {\nproviders: [\nprovideRouter(routes),\nprovideHttpClient(withInterceptorsFromDi()),\n{ provide: HTTP_INTERCEPTORS, useClass: LoaderInterceptor, multi: true }\n]\n};\n  <\/code>\n  \n<\/pre>\n\n  <style>\n    pre code {\n    background: none;\n    white-space: pre;\n    display: block;\n    max-width: 100%;\n    min-width: 100px;\n    font-size: 16px;\n    padding: 15px 20px 12px 22px;\n    line-height: 1.75;\n}\n\ncode {\n    font-size: inherit;\n    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;\n}\n\npre {\n    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;\n    clear: both;\n    color: #fff;\n    background: #1b1b1b;\n    padding: 0;\n    -moz-tab-size: 2;\n    -o-tab-size: 2;\n    tab-size: 2;\n    -ms-word-break: normal;\n    word-break: normal;\n    -webkit-hyphens: none;\n    -ms-hyphens: none;\n    hyphens: none;\n    position: relative;\n    line-height: 28px;\n    border-radius: 8px;\n    overflow: hidden;\n}\n  <\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-02df664 elementor-widget elementor-widget-heading\" data-id=\"02df664\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">5. Include the Loader Component in the App<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-aa59258 elementor-widget elementor-widget-text-editor\" data-id=\"aa59258\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now, include the LoaderComponent in the main application template.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5dbb815 elementor-widget elementor-widget-heading\" data-id=\"5dbb815\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Step 1: Add the Component in app.component.ts<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8783fbe elementor-widget elementor-widget-text-editor\" data-id=\"8783fbe\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Make sure app.component.ts is a Standalone Component and imports LoaderComponent:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9a16c05 codice-blusail elementor-widget elementor-widget-html\" data-id=\"9a16c05\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\">\n  <code markup=\"tt\" class=\" language-css\">\n\nimport { Component } from '@angular\/core';\nimport { RouterOutlet } from '@angular\/router';\nimport { LoaderComponent } from '.\/loader\/loader.component';\n\n@Component({\nselector: 'app-root',\nstandalone: true,\nimports: [RouterOutlet, LoaderComponent],\ntemplate: `\n&lt;app-loader&gt;&lt;\/app-loader&gt;\n&lt;router-outlet&gt;&lt;\/router-outlet&gt;\n`,\n})\nexport class AppComponent {}\n  <\/code>\n  \n<\/pre>\n\n  <style>\n    pre code {\n    background: none;\n    white-space: pre;\n    display: block;\n    max-width: 100%;\n    min-width: 100px;\n    font-size: 16px;\n    padding: 15px 20px 12px 22px;\n    line-height: 1.75;\n}\n\ncode {\n    font-size: inherit;\n    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;\n}\n\npre {\n    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;\n    clear: both;\n    color: #fff;\n    background: #1b1b1b;\n    padding: 0;\n    -moz-tab-size: 2;\n    -o-tab-size: 2;\n    tab-size: 2;\n    -ms-word-break: normal;\n    word-break: normal;\n    -webkit-hyphens: none;\n    -ms-hyphens: none;\n    hyphens: none;\n    position: relative;\n    line-height: 28px;\n    border-radius: 8px;\n    overflow: hidden;\n}\n  <\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bfc0985 elementor-widget elementor-widget-heading\" data-id=\"bfc0985\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">6. Test the Implementation<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b852fc3 elementor-widget elementor-widget-text-editor\" data-id=\"b852fc3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now, whenever an HTTP call is made, the loader will automatically appear until the request completes.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dc4c0e0 elementor-widget elementor-widget-heading\" data-id=\"dc4c0e0\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Example of an HTTP Call<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-371456d elementor-widget elementor-widget-text-editor\" data-id=\"371456d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Here is an example service that makes an HTTP call:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0fcc658 codice-blusail elementor-widget elementor-widget-html\" data-id=\"0fcc658\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\">\n  <code markup=\"tt\" class=\" language-css\">\n\nimport { Injectable, inject } from '@angular\/core';\nimport { HttpClient } from '@angular\/common\/http';\nimport { Observable } from 'rxjs';\n\n@Injectable({\nprovidedIn: 'root'\n})\nexport class DataService {\nprivate http = inject(HttpClient);\nprivate apiUrl = 'https:\/\/jsonplaceholder.typicode.com\/posts';\n\ngetPosts(): Observable&lt;any&gt; {\nreturn this.http.get(this.apiUrl);\n}\n}\n  <\/code>\n  \n<\/pre>\n\n  <style>\n    pre code {\n    background: none;\n    white-space: pre;\n    display: block;\n    max-width: 100%;\n    min-width: 100px;\n    font-size: 16px;\n    padding: 15px 20px 12px 22px;\n    line-height: 1.75;\n}\n\ncode {\n    font-size: inherit;\n    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;\n}\n\npre {\n    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;\n    clear: both;\n    color: #fff;\n    background: #1b1b1b;\n    padding: 0;\n    -moz-tab-size: 2;\n    -o-tab-size: 2;\n    tab-size: 2;\n    -ms-word-break: normal;\n    word-break: normal;\n    -webkit-hyphens: none;\n    -ms-hyphens: none;\n    hyphens: none;\n    position: relative;\n    line-height: 28px;\n    border-radius: 8px;\n    overflow: hidden;\n}\n  <\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8b5fc10 elementor-widget elementor-widget-text-editor\" data-id=\"8b5fc10\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>When you call getPosts() from a component, the loader will automatically appear and disappear once the request is finished.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-49dc2d0 elementor-widget elementor-widget-heading\" data-id=\"49dc2d0\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">7. Optimizations and Considerations<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2de627e elementor-widget elementor-widget-heading\" data-id=\"2de627e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Exclude Certain Requests<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cd348c2 elementor-widget elementor-widget-text-editor\" data-id=\"cd348c2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>If you don\u2019t want the loader to appear for some requests (e.g., polling calls or background requests), you can modify the interceptor to ignore them:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-27fd64b codice-blusail elementor-widget elementor-widget-html\" data-id=\"27fd64b\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\">\n  <code markup=\"tt\" class=\" language-css\">\n\nintercept(request: HttpRequest&lt;unknown&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;unknown&gt;&gt; {\n\/\/ Ignora le richieste con un header specifico\nif (request.headers.get('skip-loader')) {\nreturn next.handle(request);\n}\n\nthis.loaderService.show();\nreturn next.handle(request).pipe(\nfinalize(() =&gt; {\nthis.loaderService.hide();\n})\n);\n}\n  <\/code>\n  \n<\/pre>\n\n  <style>\n    pre code {\n    background: none;\n    white-space: pre;\n    display: block;\n    max-width: 100%;\n    min-width: 100px;\n    font-size: 16px;\n    padding: 15px 20px 12px 22px;\n    line-height: 1.75;\n}\n\ncode {\n    font-size: inherit;\n    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;\n}\n\npre {\n    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;\n    clear: both;\n    color: #fff;\n    background: #1b1b1b;\n    padding: 0;\n    -moz-tab-size: 2;\n    -o-tab-size: 2;\n    tab-size: 2;\n    -ms-word-break: normal;\n    word-break: normal;\n    -webkit-hyphens: none;\n    -ms-hyphens: none;\n    hyphens: none;\n    position: relative;\n    line-height: 28px;\n    border-radius: 8px;\n    overflow: hidden;\n}\n  <\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-46f51d0 elementor-widget elementor-widget-heading\" data-id=\"46f51d0\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Error Handling<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5020125 elementor-widget elementor-widget-text-editor\" data-id=\"5020125\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>If you want to ensure that the loader is hidden even in case of an error, you can use the catchError operator:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6573faf codice-blusail elementor-widget elementor-widget-html\" data-id=\"6573faf\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\">\n  <code markup=\"tt\" class=\" language-css\">\n\nimport { catchError } from 'rxjs\/operators';\nimport { throwError } from 'rxjs';\n\n\/\/ ...\nreturn next.handle(request).pipe(\ncatchError(error =&gt; {\nthis.loaderService.hide();\nreturn throwError(() =&gt; error);\n}),\nfinalize(() =&gt; {\nthis.loaderService.hide();\n})\n);\n  <\/code>\n  \n<\/pre>\n\n  <style>\n    pre code {\n    background: none;\n    white-space: pre;\n    display: block;\n    max-width: 100%;\n    min-width: 100px;\n    font-size: 16px;\n    padding: 15px 20px 12px 22px;\n    line-height: 1.75;\n}\n\ncode {\n    font-size: inherit;\n    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;\n}\n\npre {\n    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;\n    clear: both;\n    color: #fff;\n    background: #1b1b1b;\n    padding: 0;\n    -moz-tab-size: 2;\n    -o-tab-size: 2;\n    tab-size: 2;\n    -ms-word-break: normal;\n    word-break: normal;\n    -webkit-hyphens: none;\n    -ms-hyphens: none;\n    hyphens: none;\n    position: relative;\n    line-height: 28px;\n    border-radius: 8px;\n    overflow: hidden;\n}\n  <\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-aa55078 elementor-widget elementor-widget-heading\" data-id=\"aa55078\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Conclusion<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a0a28c3 elementor-widget elementor-widget-text-editor\" data-id=\"a0a28c3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>With <strong>Angular 17<\/strong>, <strong>Signals<\/strong>, and <strong>Standalone Components<\/strong>, managing a dynamic loader during HTTP calls becomes <strong>simpler and more reactive<\/strong>. By using an <strong>HTTP interceptor<\/strong> and a service based on Signals, you can: <\/p><ul><li><strong>Centralize<\/strong> the loader display logic.<\/li><li><strong>Avoid<\/strong> code <strong>duplication<\/strong>.<\/li><li><strong>Improve user experience<\/strong> with immediate visual feedback.<\/li><\/ul><p>This solution is <strong>modern, efficient, and scalable,<\/strong>perfect for Angular applications aiming for maximum reactivity and usability.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>With the introduction of Angular 17 and new features like Signals and Standalone Components, state management and application structure have become simpler and more reactive.<\/p>\n","protected":false},"author":1,"featured_media":987713,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[85],"tags":[],"class_list":["post-10179","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-it-en"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Use an Interceptor in Angular with Signals and Standalone Components to Display a Dynamic Loader - Blusail Technologies<\/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.blusailtechnologies.com\/en\/how-to-use-an-interceptor-in-angular-with-signals-and-standalone-components-to-display-a-dynamic-loader\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use an Interceptor in Angular with Signals and Standalone Components to Display a Dynamic Loader - Blusail Technologies\" \/>\n<meta property=\"og:description\" content=\"With the introduction of Angular 17 and new features like Signals and Standalone Components, state management and application structure have become simpler and more reactive.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.blusailtechnologies.com\/en\/how-to-use-an-interceptor-in-angular-with-signals-and-standalone-components-to-display-a-dynamic-loader\/\" \/>\n<meta property=\"og:site_name\" content=\"Blusail Technologies\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-10T08:19:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-13T14:04:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.blusailtechnologies.com\/wp-content\/uploads\/2023\/04\/1_L_43ik1_Rz_9ZwUQUfi94w-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"958\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.blusailtechnologies.com\/en\/how-to-use-an-interceptor-in-angular-with-signals-and-standalone-components-to-display-a-dynamic-loader\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.blusailtechnologies.com\/en\/how-to-use-an-interceptor-in-angular-with-signals-and-standalone-components-to-display-a-dynamic-loader\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/www.blusailtechnologies.com\/en\/#\/schema\/person\/fb3e6f6aed34396bf60afb3d921d933e\"},\"headline\":\"How to Use an Interceptor in Angular with Signals and Standalone Components to Display a Dynamic Loader\",\"datePublished\":\"2023-04-10T08:19:08+00:00\",\"dateModified\":\"2026-04-13T14:04:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.blusailtechnologies.com\/en\/how-to-use-an-interceptor-in-angular-with-signals-and-standalone-components-to-display-a-dynamic-loader\/\"},\"wordCount\":478,\"publisher\":{\"@id\":\"https:\/\/www.blusailtechnologies.com\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.blusailtechnologies.com\/en\/how-to-use-an-interceptor-in-angular-with-signals-and-standalone-components-to-display-a-dynamic-loader\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.blusailtechnologies.com\/wp-content\/uploads\/2023\/04\/1_L_43ik1_Rz_9ZwUQUfi94w-2.png\",\"articleSection\":[\"IT\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.blusailtechnologies.com\/en\/how-to-use-an-interceptor-in-angular-with-signals-and-standalone-components-to-display-a-dynamic-loader\/\",\"url\":\"https:\/\/www.blusailtechnologies.com\/en\/how-to-use-an-interceptor-in-angular-with-signals-and-standalone-components-to-display-a-dynamic-loader\/\",\"name\":\"How to Use an Interceptor in Angular with Signals and Standalone Components to Display a Dynamic Loader - Blusail Technologies\",\"isPartOf\":{\"@id\":\"https:\/\/www.blusailtechnologies.com\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.blusailtechnologies.com\/en\/how-to-use-an-interceptor-in-angular-with-signals-and-standalone-components-to-display-a-dynamic-loader\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.blusailtechnologies.com\/en\/how-to-use-an-interceptor-in-angular-with-signals-and-standalone-components-to-display-a-dynamic-loader\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.blusailtechnologies.com\/wp-content\/uploads\/2023\/04\/1_L_43ik1_Rz_9ZwUQUfi94w-2.png\",\"datePublished\":\"2023-04-10T08:19:08+00:00\",\"dateModified\":\"2026-04-13T14:04:02+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.blusailtechnologies.com\/en\/how-to-use-an-interceptor-in-angular-with-signals-and-standalone-components-to-display-a-dynamic-loader\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.blusailtechnologies.com\/en\/how-to-use-an-interceptor-in-angular-with-signals-and-standalone-components-to-display-a-dynamic-loader\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.blusailtechnologies.com\/en\/how-to-use-an-interceptor-in-angular-with-signals-and-standalone-components-to-display-a-dynamic-loader\/#primaryimage\",\"url\":\"https:\/\/www.blusailtechnologies.com\/wp-content\/uploads\/2023\/04\/1_L_43ik1_Rz_9ZwUQUfi94w-2.png\",\"contentUrl\":\"https:\/\/www.blusailtechnologies.com\/wp-content\/uploads\/2023\/04\/1_L_43ik1_Rz_9ZwUQUfi94w-2.png\",\"width\":958,\"height\":800},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.blusailtechnologies.com\/en\/how-to-use-an-interceptor-in-angular-with-signals-and-standalone-components-to-display-a-dynamic-loader\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.blusailtechnologies.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Use an Interceptor in Angular with Signals and Standalone Components to Display a Dynamic Loader\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.blusailtechnologies.com\/en\/#website\",\"url\":\"https:\/\/www.blusailtechnologies.com\/en\/\",\"name\":\"BlusailTechnologies\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.blusailtechnologies.com\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.blusailtechnologies.com\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.blusailtechnologies.com\/en\/#organization\",\"name\":\"BlusailTechnologies\",\"url\":\"https:\/\/www.blusailtechnologies.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.blusailtechnologies.com\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.blusailtechnologies.com\/wp-content\/uploads\/2023\/03\/blusail-logo-8.png\",\"contentUrl\":\"https:\/\/www.blusailtechnologies.com\/wp-content\/uploads\/2023\/03\/blusail-logo-8.png\",\"width\":2418,\"height\":686,\"caption\":\"BlusailTechnologies\"},\"image\":{\"@id\":\"https:\/\/www.blusailtechnologies.com\/en\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.blusailtechnologies.com\/en\/#\/schema\/person\/fb3e6f6aed34396bf60afb3d921d933e\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.blusailtechnologies.com\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/34a15997ae11fb8ce9c6b750b625b8a996894c8a6ea58a09a996787f8df84770?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/34a15997ae11fb8ce9c6b750b625b8a996894c8a6ea58a09a996787f8df84770?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/www.blusailtechnologies.com\"],\"url\":\"https:\/\/www.blusailtechnologies.com\/en\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use an Interceptor in Angular with Signals and Standalone Components to Display a Dynamic Loader - Blusail Technologies","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.blusailtechnologies.com\/en\/how-to-use-an-interceptor-in-angular-with-signals-and-standalone-components-to-display-a-dynamic-loader\/","og_locale":"en_US","og_type":"article","og_title":"How to Use an Interceptor in Angular with Signals and Standalone Components to Display a Dynamic Loader - Blusail Technologies","og_description":"With the introduction of Angular 17 and new features like Signals and Standalone Components, state management and application structure have become simpler and more reactive.","og_url":"https:\/\/www.blusailtechnologies.com\/en\/how-to-use-an-interceptor-in-angular-with-signals-and-standalone-components-to-display-a-dynamic-loader\/","og_site_name":"Blusail Technologies","article_published_time":"2023-04-10T08:19:08+00:00","article_modified_time":"2026-04-13T14:04:02+00:00","og_image":[{"width":958,"height":800,"url":"https:\/\/www.blusailtechnologies.com\/wp-content\/uploads\/2023\/04\/1_L_43ik1_Rz_9ZwUQUfi94w-2.png","type":"image\/png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.blusailtechnologies.com\/en\/how-to-use-an-interceptor-in-angular-with-signals-and-standalone-components-to-display-a-dynamic-loader\/#article","isPartOf":{"@id":"https:\/\/www.blusailtechnologies.com\/en\/how-to-use-an-interceptor-in-angular-with-signals-and-standalone-components-to-display-a-dynamic-loader\/"},"author":{"name":"admin","@id":"https:\/\/www.blusailtechnologies.com\/en\/#\/schema\/person\/fb3e6f6aed34396bf60afb3d921d933e"},"headline":"How to Use an Interceptor in Angular with Signals and Standalone Components to Display a Dynamic Loader","datePublished":"2023-04-10T08:19:08+00:00","dateModified":"2026-04-13T14:04:02+00:00","mainEntityOfPage":{"@id":"https:\/\/www.blusailtechnologies.com\/en\/how-to-use-an-interceptor-in-angular-with-signals-and-standalone-components-to-display-a-dynamic-loader\/"},"wordCount":478,"publisher":{"@id":"https:\/\/www.blusailtechnologies.com\/en\/#organization"},"image":{"@id":"https:\/\/www.blusailtechnologies.com\/en\/how-to-use-an-interceptor-in-angular-with-signals-and-standalone-components-to-display-a-dynamic-loader\/#primaryimage"},"thumbnailUrl":"https:\/\/www.blusailtechnologies.com\/wp-content\/uploads\/2023\/04\/1_L_43ik1_Rz_9ZwUQUfi94w-2.png","articleSection":["IT"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.blusailtechnologies.com\/en\/how-to-use-an-interceptor-in-angular-with-signals-and-standalone-components-to-display-a-dynamic-loader\/","url":"https:\/\/www.blusailtechnologies.com\/en\/how-to-use-an-interceptor-in-angular-with-signals-and-standalone-components-to-display-a-dynamic-loader\/","name":"How to Use an Interceptor in Angular with Signals and Standalone Components to Display a Dynamic Loader - Blusail Technologies","isPartOf":{"@id":"https:\/\/www.blusailtechnologies.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.blusailtechnologies.com\/en\/how-to-use-an-interceptor-in-angular-with-signals-and-standalone-components-to-display-a-dynamic-loader\/#primaryimage"},"image":{"@id":"https:\/\/www.blusailtechnologies.com\/en\/how-to-use-an-interceptor-in-angular-with-signals-and-standalone-components-to-display-a-dynamic-loader\/#primaryimage"},"thumbnailUrl":"https:\/\/www.blusailtechnologies.com\/wp-content\/uploads\/2023\/04\/1_L_43ik1_Rz_9ZwUQUfi94w-2.png","datePublished":"2023-04-10T08:19:08+00:00","dateModified":"2026-04-13T14:04:02+00:00","breadcrumb":{"@id":"https:\/\/www.blusailtechnologies.com\/en\/how-to-use-an-interceptor-in-angular-with-signals-and-standalone-components-to-display-a-dynamic-loader\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.blusailtechnologies.com\/en\/how-to-use-an-interceptor-in-angular-with-signals-and-standalone-components-to-display-a-dynamic-loader\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.blusailtechnologies.com\/en\/how-to-use-an-interceptor-in-angular-with-signals-and-standalone-components-to-display-a-dynamic-loader\/#primaryimage","url":"https:\/\/www.blusailtechnologies.com\/wp-content\/uploads\/2023\/04\/1_L_43ik1_Rz_9ZwUQUfi94w-2.png","contentUrl":"https:\/\/www.blusailtechnologies.com\/wp-content\/uploads\/2023\/04\/1_L_43ik1_Rz_9ZwUQUfi94w-2.png","width":958,"height":800},{"@type":"BreadcrumbList","@id":"https:\/\/www.blusailtechnologies.com\/en\/how-to-use-an-interceptor-in-angular-with-signals-and-standalone-components-to-display-a-dynamic-loader\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.blusailtechnologies.com\/en\/"},{"@type":"ListItem","position":2,"name":"How to Use an Interceptor in Angular with Signals and Standalone Components to Display a Dynamic Loader"}]},{"@type":"WebSite","@id":"https:\/\/www.blusailtechnologies.com\/en\/#website","url":"https:\/\/www.blusailtechnologies.com\/en\/","name":"BlusailTechnologies","description":"","publisher":{"@id":"https:\/\/www.blusailtechnologies.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.blusailtechnologies.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.blusailtechnologies.com\/en\/#organization","name":"BlusailTechnologies","url":"https:\/\/www.blusailtechnologies.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.blusailtechnologies.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.blusailtechnologies.com\/wp-content\/uploads\/2023\/03\/blusail-logo-8.png","contentUrl":"https:\/\/www.blusailtechnologies.com\/wp-content\/uploads\/2023\/03\/blusail-logo-8.png","width":2418,"height":686,"caption":"BlusailTechnologies"},"image":{"@id":"https:\/\/www.blusailtechnologies.com\/en\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.blusailtechnologies.com\/en\/#\/schema\/person\/fb3e6f6aed34396bf60afb3d921d933e","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.blusailtechnologies.com\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/34a15997ae11fb8ce9c6b750b625b8a996894c8a6ea58a09a996787f8df84770?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/34a15997ae11fb8ce9c6b750b625b8a996894c8a6ea58a09a996787f8df84770?s=96&d=mm&r=g","caption":"admin"},"sameAs":["http:\/\/www.blusailtechnologies.com"],"url":"https:\/\/www.blusailtechnologies.com\/en\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.blusailtechnologies.com\/en\/wp-json\/wp\/v2\/posts\/10179","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blusailtechnologies.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blusailtechnologies.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blusailtechnologies.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blusailtechnologies.com\/en\/wp-json\/wp\/v2\/comments?post=10179"}],"version-history":[{"count":19,"href":"https:\/\/www.blusailtechnologies.com\/en\/wp-json\/wp\/v2\/posts\/10179\/revisions"}],"predecessor-version":[{"id":988555,"href":"https:\/\/www.blusailtechnologies.com\/en\/wp-json\/wp\/v2\/posts\/10179\/revisions\/988555"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.blusailtechnologies.com\/en\/wp-json\/wp\/v2\/media\/987713"}],"wp:attachment":[{"href":"https:\/\/www.blusailtechnologies.com\/en\/wp-json\/wp\/v2\/media?parent=10179"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blusailtechnologies.com\/en\/wp-json\/wp\/v2\/categories?post=10179"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blusailtechnologies.com\/en\/wp-json\/wp\/v2\/tags?post=10179"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}