title: Angular ngx-spinner not showing
body: <p>I need to show the spinner till the data is fetch from the httpclient. But the spinner is not showing.</p>
  
  <p>I just need to show spinner or loader until the data comes from API so user can see the data is loading. Is there any problem in my <code>.html</code> ?.</p>
  
  <p>It's showing when I'm filtering data but not showing when the page is loading .</p>
  
  <pre class="lang-js prettyprint-override"><code>    import { Component, OnInit } from '@angular/core';
      import { ApiService } from 'app/services/api/api.service';
      import { map } from 'rxjs/operators';
      import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
      import { HttpClient, HttpHeaders } from '@angular/common/http';
      import { NgxSpinnerService } from 'ngx-spinner';
      import { Observable } from 'rxjs/Observable';
      import 'rxjs/add/operator/map'
  
      @Component({
      selector: 'app-home',
      templateUrl: './home.component.html',
      styleUrls: ['./home.component.scss']
      })
      export class HomeComponent {
  
        clientData: Observable&lt;any&gt;;
        data: any  = []; 
        status: any = [];
        countunsettled: any;
        countsettled: any;
        sums: any;
  
        policy_id:Set = new Set();
  
         constructor(private modalService: NgbModal, private api:ApiService, public httpClient: HttpClient, private spinner: NgxSpinnerService) { 
  
         this.getClaims();
        }
  
        userFilter: any = { policy_id:'', claim_no:'', member_name:'', status:'', company_id: ''};
  
      openDeal(deletecontent,x){
         this.selectedDeal = x;
          this.dealModal= this.modalService.open(deletecontent, x);
          this.dealModal.result.then(r=&gt;{
          }, err=&gt; console.log(err))
      }
  
       getClaims(){
             this.spinner.show();
  
       if(this.userFilter.company_id){
         let url = 'xyz.com.pk'+this.userFilter.company_id;
       }else{
         let url = xyz.com.pk.php?offset=0&amp;limit=100';
  
        }
  
       this.clientData = this.httpClient.get(url).
       subscribe(data =&gt; {
         console.log(data);
         this.spinner.hide();
  
         this.data = data.records;
         this.data.forEach(d =&gt; this.policy_id.add(d.policy_id));
  
       var status = 'settled';
       var status2 = 'submitted';
  
       var countsettled = this.data.filter((obj) =&gt; obj.status === status).length;
       var countunsettled = this.data.filter((obj) =&gt; obj.status === status2).length;
  
       console.log(countsettled);
       this.countsettled = countsettled;
       console.log(countunsettled);
       this.countunsettled = countunsettled;
  
       const sum1 = this.data.filter(item =&gt; item.status === 'settled')
                       .reduce((acc, item) =&gt; acc + Number(item.approved_value), 0);
                       console.log(sum1);
                       this.sum1 = sum1;
  
       const sum2 = this.data.filter(item =&gt; item.status === 'submitted')
                       .reduce((acc, item) =&gt; acc + Number(item.approved_value), 0);
                       console.log(sum2);
                       this.sum2 = sum2
           }
        }
      }
  </code></pre>
  
  <p><strong>html template:</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ngx-spinner&gt;&lt;/ngx-spinner&gt;
  </code></pre>
  
  <p>it's not showing any error and also not showing the spinner.</p>