title: Use an Angular Service in an Angular Interceptor
body: <p>I have a service and I have a http interceptor. I would like to notify my service everytime a intercept happens. This is my code:</p>
  <p>interceptor.ts:</p>
  <pre><code>import { Injectable } from '@angular/core';
  import {
    HttpRequest,
    HttpHandler,
    HttpEvent,
    HttpInterceptor
  } from '@angular/common/http';
  import { Observable } from 'rxjs';
  import { MastermindService } from './mastermind.service';
  
  @Injectable()
  export class LogInterceptor implements HttpInterceptor {
  
    constructor(private mastermindService: MastermindService) {}
  
    intercept(request: HttpRequest&lt;unknown&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;unknown&gt;&gt; {
      this.mastermindService.notify(`${request.method} ${request.urlWithParams} ${JSON.stringify(request.body)} ${request.responseType}`)
      return next.handle(request);
  
    }
  }
  </code></pre>
  <p>service.ts:</p>
  <pre><code>import { Injectable } from '@angular/core';
  import { Observable, Subject } from 'rxjs';
  import { HttpClient } from '@angular/common/http';
  
  
  @Injectable({
    providedIn: 'root'
  })
  export class MastermindService {
    private subject = new Subject&lt;string&gt;();
  
    public notify(message: string): void {
      this.subject.next(message);
    }
    public listen(): Observable&lt;string&gt; {
      return this.subject.asObservable();
    }
  }
  </code></pre>
  <p>app.module.ts:</p>
  <pre><code>import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { FormsModule } from '@angular/forms';
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { CoreModule } from './core/core.module';
  import { SharedModule } from './shared/shared.module';
  import { GameboardItemComponent } from './shared/gameboard-item/gameboard-item.component';
  import { LogInterceptor } from './core/log.interceptor';
  import { MastermindService } from './core/mastermind.service';
  
  
  @NgModule({
    declarations: [
      AppComponent,
    ],
    imports: [
      FormsModule,
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      BrowserAnimationsModule,
      CoreModule,
      SharedModule,
     
    ],
    providers: [{provide: HTTP_INTERCEPTORS, useClass: LogInterceptor, multi: true, deps: [MastermindService]}],
    bootstrap: [AppComponent],
    entryComponents: [GameboardItemComponent] // define the dynamic component here in module.ts
  
  })
  export class AppModule { }
  </code></pre>
  <p>Further more I have a log component where the intercept messages should be outputed:</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { MastermindService } from 'src/app/core/mastermind.service';
  
  @Component({
    selector: 'app-custom-log',
    templateUrl: './custom-log.component.html',
    styleUrls: ['./custom-log.component.scss']
  })
  export class CustomLogComponent implements OnInit {
  
    constructor(private mastermindService: MastermindService) { }
    logs: string[] = [];
    
    ngOnInit(): void {
      this.mastermindService.listen().subscribe((event) =&gt; {
         this.logs.push(event);
         console.log(event);
      });
    }
  
  
  }
  </code></pre>
  <p>The problem is that there is not output on the console. And there is also no element in my logs array.</p>