title: Make http request call every x minute in angular 9
body: <p>I am trying to create a dynamic component that will take api url and intervalPeriod say 'x' minute as input and fetch data every x minute that is passed as input.</p>
  <p>Here is my stackblitz that i tried following all the stackoverflow answers..</p>
  <p>I need to show data the very first time at 0 seconds and it has to fetch data after that every x second or minute . Does this look right or what am i missing here?</p>
  <p><a href="https://stackblitz.com/edit/angular-wzvwmy?file=src%2Fapp%2Fdata-emitter%2Fdata-emitter.component.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-wzvwmy?file=src%2Fapp%2Fdata-emitter%2Fdata-emitter.component.ts</a></p>
  <pre><code>import { Component, Input, OnInit, Output } from &quot;@angular/core&quot;;
  import { interval } from &quot;rxjs&quot;;
  import { flatMap, map } from &quot;rxjs/operators&quot;;
  import { Http } from &quot;@angular/http&quot;;
  
  @Component({
    selector: &quot;app-data-emitter&quot;,
    templateUrl: &quot;./data-emitter.component.html&quot;,
    styleUrls: [&quot;./data-emitter.component.css&quot;]
  })
  export class DataEmitterComponent implements OnInit {
    @Output() data: any;
    @Input() apiUrl: any;
    @Input() intervalPeriod: number;
  
    minutes: number;
  
    constructor(private http: Http) {}
    ngOnInit() {
      this.minutes = this.intervalPeriod * 60 * 1000;
    }
  
    subscribes$ = interval(this.minutes)
      .pipe(flatMap(() =&gt; this.getData()))
      //this.getData()
      .subscribe(data =&gt; {
        this.data = data;
        console.log(this.data);
      });
  
    getData() {
      return this.http
        .get(this.apiUrl)
        .pipe(map((response: any) =&gt; response.json()));
    }
  }
  </code></pre>