title: how to add Upload Progress bar to files upload in Angular6
body: <p>I used this code to upload files in <code>Angular 6</code>.</p>
  
  <p>Everything works fine but I need to add the progress bar to the code. After searching from <a href="https://stackoverflow.com/">stackoverflow</a>, I saw this code below but being new to <code>angular</code> or <code>angular6</code> I do not know how to integrate it or make the progress bar works with the <code>angular</code> form submission.</p>
  
  <pre><code>this.uploader.onProgressItem = (progress: any) =&gt; {    
    console.log(progress['progress']);    
  };
  
  this.uploader.onSuccessItem = (progress: any) =&gt; {
    console.log('I receive the response file posted in API');    
  };
  </code></pre>
  
  <p><a href="https://stackoverflow.com/questions/51779303/progress-bar-in-ng2-file-upload-in-angular-6">Progress Bar in ng2-file-upload in Angular 6</a></p>
  
  <p>Below is the code</p>
  
  <p><strong>app.component.ts:</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { FileUploader, FileSelectDirective } from 'ng2-file-upload/ng2-file-upload';
  
  const URL = 'http://localhost:3000/api/upload';
  
  @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
  })
  
  export class AppComponent implements OnInit {
      title = 'app';
  
      public uploader: FileUploader = new FileUploader({ url: URL, itemAlias: 'photo' });
  
      ngOnInit() {
          this.uploader.onAfterAddingFile = (file) =&gt; { file.withCredentials = false; };
          this.uploader.onCompleteItem = (item: any, response: any, status: any, headers: any) =&gt; {
              console.log('ImageUpload:uploaded:', item, status, response);
              alert('File uploaded successfully');
          };
      }
  }
  </code></pre>
  
  <p><strong>app.component.html:</strong></p>
  
  <pre><code>&lt;input type="file" name="photo" ng2FileSelect [uploader]="uploader" /&gt;
  &lt;button type="button" class="btn btn-success btn-s"
    (click)="uploader.uploadAll()"    
    [disabled]="!uploader.getNotUploadedItems().length" &gt;
    Upload an Image  
  &lt;/button&gt;
  </code></pre>