title: Angular 2 real time progress bar
body: <p>In my Angular 2 application, I have subscribed to a simple service to fetch data from a remote database and display them in a table view. Everything works fine and now I want to add a progress bar to show the real time progress for data fetching from the server.
  I am currently using <a href="http://www.primefaces.org/primeng/#/progressbar" rel="noreferrer">primeng progressbar</a>  component for showing the progress. But It can only be provided a fixed time to display the progress as in the code below,</p>
  
  <pre><code>ngOnInit() {
      let interval = setInterval(() =&gt; {
          this.value = this.value + Math.floor(Math.random() * 10) + 1;
          if(this.value &gt;= 100) {
              this.value = 100;
              this.msgs = [{severity: 'info', summary: 'Success', detail: 'Process Completed'}];
              clearInterval(interval);
          }
      }, 2000);
  }
  </code></pre>
  
  <p>2000 means the time (in milliseconds) the progressbar is showing. 
  But what I need is not this, I need to display the progress bar initially and fill the progress bar dynamically and real time until the actual data fetch completed. Progress bar should be completed and invisible only after the data fetch complete and just before data rendered to the table view.</p>
  
  <p>Is there any logic to do it other than providing the static time for the progress bar? Any other solutions other than <em>primeng</em> are welcome.</p>
  
  <p>Thanks in advance.</p>
  
  <p>Update:</p>
  
  <p><strong>My service class</strong>,</p>
  
  <pre><code>@Injectable()
  export class MyService {
      constructor(public http:Http) {
      }
  
  search(criteria:SearchObject):Observable&lt;ResponseObject&gt;{
      let headers = new Headers({ 'Content-Type': 'application/json' });
      let options = new RequestOptions({ headers: headers });    
      return        this.http.post(URL,JSON.stringify(criteria),options)
        .map(res =&gt; res.json())
  }
  </code></pre>
  
  <p>}</p>
  
  <p><strong>My component class</strong>,</p>
  
  <pre><code>export class SearchComponent{
  
      var response;
      constructor(public myService:MyService) {
      }
  
      search(): void {
  
       //Need to show the progress bar here
  
          var criteria = new SearchObject();
          //set data to the criteria object
         this.myService.search(criteria)
           .subscribe(
             data =&gt; {
               this.response = data;;
           },
         );            
        //close the progress bar after completing communicating with server
  
      }
  </code></pre>
  
  <p>}</p>