title: Display Spinner till API Response in angular 6
body: <p>I am new to Angular 6 and no experience in any version of angular previously &amp; creating my website using angular 6, in which i have to display spinner till API Response is pending.I am using <strong>httpclient</strong> of angular 6 to call APIs. I want to show spinner for every API request. I searched on SO but didn't find answer of my question.Below is my component &amp; services file.</p>
  
  <pre><code>/* data.services.ts */
  
  import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  
  @Injectable({
    providedIn: 'root'
  })
  
  export class DataService {
    constructor(private http: HttpClient) { }
    getUsers() {
      return this.http.get('https://jsonplaceholder.typicode.com/users')
    } 
  }
  
  /* users.component.ts *
  
  import { Component, OnInit } from '@angular/core';
  import {DataService} from '../data.service';
  import { Observable } from 'rxjs';
  
  @Component({
    selector: 'app-users',
    templateUrl: './users.component.html',
    styleUrls: ['./users.component.css']
   })
  
  export class UsersComponent implements OnInit {
    users$: Object;
    constructor(private data: DataService) { }
    ngOnInit() {
      this.data.getUsers().subscribe(data =&gt; {
        this.users$ = data; 
      });
    }
  }
  </code></pre>
  
  <p><strong>Note: I don't want to use any package or module for that.</strong></p>
  
  <p>Can anyone please help me to solve this problem? Any help would be appreciated.</p>