title: how to send new request in angular
body: <p>I'm new in angular so please be understanding.
  Do anyone could help me to figure out what is wrong with my get request.
  The problem is that I'm retrieving only once an array of data from rest backend. Or it's just seems to be working like that. The init request fetch empty array what is correct (server has no records) but after that request I'm putting on backend some record, and after socket event action I'm fetching one more time that data thanks to angular. Even the data was changed on a backend, the request response is the same as before with empty array. I'm so tired of trying to change/set headers like Expired, Cache-Control etc. Trying to use promise or observable to get that stuff. </p>
  
  <p>I don't see any cache method used for that.</p>
  
  <p>If I open another tab in a browser and type the same url then Im getting correct data with one record in array.</p>
  
  <p>Is there anyone who meet with similar problem? I found only in google how to send only one request ;d but that's not what I need.</p>
  
  <p>I also tried to trigger that action with button on the page with the same rest url and also with other correct url and result was the same like:
  - fetched data, rendered in console log, in browser network there was request and response
  - after few seconds I have clicked button and data was rendered in console.log  but there was no request and respond in network tab. So for me it looks like angular is sending only one request and then somehow te response is in cache. But as I mentioned I'm not using cache.</p>
  
  <p>Any thoughts?</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient, HttpHeaders } from '@angular/common/http';
  
  @Injectable({
    providedIn: 'root'
  })
  export class ExtApiService {
  
    baseUrl: string = 'https://exampledomain.dev/public/inventory?id=testid';
  
    constructor(private httpClient: HttpClient) { }
  
    public getDonations() {
  
      const httpOptions = {
        headers: new HttpHeaders({
          'Content-Type':  'application/json',
          'Cache-Control': 'no-store',
          'Expires': '0'
        })
      };
  
      return this.httpClient.get(this.baseUrl, httpOptions);
  
    }
  }
  </code></pre>
  
  <p>The only correct response Im getting when I put incorrect url then every single request with response is visible in network tab.</p>
  
  <p>I would like to know how to force any request.</p>
  
  <p>Ohh I didnt mention that after refreshing angular page then there is that added record from the backend.</p>
  
  <p>Moreover I forgot to share with you about action (but i think that it is clear and nothing to change):</p>
  
  <pre><code>getData() {
          this.extApi.getDonations().subscribe( data =&gt; {
              console.log("MY OWN DATA CALL");
              console.log(data);
          });
      }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/xgvkO.png" rel="nofollow noreferrer">I wrote some form to test requests with api, if 200 then only one call, if 404 then as many as I can click</a></p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I found cached requests under:
  <code>this.httpClient.handler.chain.interceptor.transferState.store</code>
  there is also property like:
  <code>this.httpClient.handler.chain.interceptor.isCacheActive = true</code></p>
  
  <p>I cant set that property as false cuz handler is a private and I cannot change it from the code.</p>
  
  <p>After that I have found topic:</p>
  
  <p><a href="https://stackoverflow.com/questions/53232382/how-to-disable-caching-with-httpclient-get-in-angular-6">How to disable caching with HttpClient get in Angular 6</a>
  But changing headers didn't help. Anyone more familiar with Interceptors and caching requests?</p>
  
  <p><strong>UPDATE2 after adding meta headers to index:</strong></p>
  
  <p>requests triggered by button on the page works fine and response with correct value (generating new request visible in network tab) but this.httpClient in component still returning cached response when it is touched by code like ngOnChange()</p>
  
  <p><a href="https://i.stack.imgur.com/JHCd4.png" rel="nofollow noreferrer"></a>
  Any idea what else I could try?</p>