title: ng2-file-upload is not working correctly for one component but is for another
body: <p>I am using ng2-file-upload for 2 different components but essentially the same code. I copy and pasted the component code that is working to the component code that is not. The issue is after I upload a file, nothing happens. I have to click upload several times before the uploader actually recognizes a file was uploaded. In the other component, it works perfectly. </p>
  
  <p>Here is my component.ts code for the working file</p>
  
  <pre><code>import {Component, DoCheck, OnInit} from '@angular/core';
  import {UiService} from "../../ui.service";
  import {Transaction} from "../transaction.model";
  import {TransactionService} from "../transaction.service";
  import {FileUploader} from "ng2-file-upload";
  import {UploadService} from "../../settings/account-settings/contracts/upload-service";
  import {Router} from "@angular/router";
  
  @Component({
    selector: 'app-owner-post-eval',
    template: `
      &lt;div class="modal is-active" [ngStyle]="styleObject('ownerPost')"&gt;
        &lt;div class="modal-background"&gt;&lt;/div&gt;
        &lt;div class="modal-card"&gt;
          &lt;header class="modal-card-head"&gt;
            &lt;p class="modal-card-title"&gt;Post Evaluation&lt;/p&gt;
          &lt;/header&gt;
          &lt;section class="modal-card-body"&gt;
            &lt;form *ngIf="!uploaderLoading"&gt;
              &lt;label class="label"&gt;Post Evaluation&lt;/label&gt;
              &lt;textarea class="textarea"
                        [(ngModel)]="ownerPostEval"
                        placeholder="Please leave a review of your items current state."
                        name="ownerPostEval"&gt;&lt;/textarea&gt;
            &lt;/form&gt;
            &lt;div class="field image-upload" *ngIf="uploader?.queue?.length &lt; 1" style="margin-top: 25px; text-align: center"&gt;
              &lt;label for="file-input" style="justify-content: center"&gt;
                &lt;img src="../../../assets/plus.png" alt="Add Photo" class="image is-32x32" style="margin: auto"&gt; Add Image
              &lt;/label&gt;
              &lt;input class="file-input" id="file-input" type="file" name="photo" ng2FileSelect [uploader]="uploader"&gt;
            &lt;/div&gt;
            &lt;div class="spinner" *ngIf="uploaderLoading"&gt;&lt;/div&gt;
            &lt;div class="content" style="color: #fdfdfd; font-size: 20px; text-align: center" *ngIf="!uploaderLoading"&gt;
              &lt;span *ngIf="uploader?.queue?.length &lt; 1" style="color: #111"&gt;No images uploaded&lt;/span&gt;
              &lt;span *ngFor="let item of uploader.queue" style="color: #111"&gt;{{item?.file?.name}}&lt;/span&gt;
            &lt;/div&gt;
          &lt;/section&gt;
          &lt;footer class="modal-card-foot"&gt;
            &lt;button class="button is-success" (click)="onUploadClicked()"&gt;Save&lt;/button&gt;
            &lt;button class="button" (click)="onCloseModal()"&gt;Cancel&lt;/button&gt;
          &lt;/footer&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    `,
    styleUrls: ['../transaction.component.css']
  })
  export class OwnerPostEvalComponent implements OnInit, DoCheck {
    ownerPostEvalActive = false;
    ownerPostEval: string;
    transaction: Transaction;
    file: any;
    uploaderLoading = false;
    devUrl = 'XXXXXX';
    url = 'XXXXX';
    public uploader:FileUploader = new FileUploader({url: this.devUrl, itemAlias: 'photo'});
  
    constructor(
      private router: Router,
      private uploadS: UploadService,
      private tranS: TransactionService,
      private uis: UiService) {}
  
    ngOnInit() {
      this.uploader.onAfterAddingFile = (file)=&gt; { file.withCredentials = false; };
  
      this.uploader.onCompleteItem = (item:any, response:any, status:any, headers:any) =&gt; {
        let awsUrl = 'XXXXX' + response;
        this.onUpdateTransaction(awsUrl);
      };
    }
  
    ngDoCheck() {
      this.ownerPostEvalActive = this.uis.onReturnEval('ownerPost');
    }
  
    // pre eval
    onUpdateTransaction(fileName: string) {
      this.transaction = this.tranS.onReturnTransactionService();
      this.transaction.ownerPostReview = this.ownerPostEval;
      this.transaction.ownerPostFilled = true;
      this.transaction.ownerPostImages.push(fileName);
      this.tranS.onUpdateTransaction(this.transaction.id, this.transaction)
        .subscribe(update =&gt; {
          console.log(update);
          this.uploaderLoading = false;
          this.router.navigate(['/profile']);
          this.uis.onFlash('Post Evaluation Posted Successfully', 'success');
          this.onCloseModal();
        }, resp =&gt; {
          console.log(resp);
          this.uis.onFlash('Error Posting Post Evaluation', 'error');
        })
    }
  
    onUploadClicked() {
      this.uploader.uploadAll();
      this.uploaderLoading = true;
    }
  
    // UI
  
    styleObject(s: string): Object {
      if (s === 'ownerPost') {
        if (this.ownerPostEvalActive) {
          return {'height': '100%'};
        } else {
          return {'height': 0};
        }
      }
    }
  
    onCloseModal(){
      this.uis.onCloseModal('ownerPost');
    }
  
  
  
  }
  </code></pre>
  
  <p>and here is the code for the component that is not working</p>
  
  <pre><code>import {Component, DoCheck, OnInit} from '@angular/core';
  import {UiService} from "../../ui.service";
  import {Transaction} from "../transaction.model";
  import {TransactionService} from "../transaction.service";
  import {FileUploader} from "ng2-file-upload";
  import {UploadService} from "../../settings/account-settings/contracts/upload-service";
  import {Router} from "@angular/router";
  
  @Component({
    selector: 'app-renter-post-eval',
    template: `
      &lt;div class="modal is-active" [ngStyle]="styleObject('renterPost')"&gt;
        &lt;div class="modal-background"&gt;&lt;/div&gt;
        &lt;div class="modal-card"&gt;
          &lt;header class="modal-card-head"&gt;
            &lt;p class="modal-card-title"&gt;Post Evaluation&lt;/p&gt;
          &lt;/header&gt;
          &lt;section class="modal-card-body"&gt;
            &lt;form *ngIf="!uploaderLoading"&gt;
              &lt;label class="label"&gt;Post Evaluation&lt;/label&gt;
              &lt;textarea class="textarea"
                        [(ngModel)]="renterPostEval"
                        placeholder="Please leave a review of your items current state."
                        name="renterPostEval"&gt;&lt;/textarea&gt;
            &lt;/form&gt;
            &lt;div class="field image-upload" *ngIf="uploader?.queue?.length &lt; 1" style="margin-top: 25px; text-align: center"&gt;
              &lt;label for="file-input" style="justify-content: center"&gt;
                &lt;img src="../../../assets/plus.png" alt="Add Photo" class="image is-32x32" style="margin: auto"&gt; Add Image
              &lt;/label&gt;
              &lt;input class="file-input" id="file-input" type="file" name="photo" ng2FileSelect [uploader]="uploader"&gt;
            &lt;/div&gt;
            &lt;div class="spinner" *ngIf="uploaderLoading"&gt;&lt;/div&gt;
            &lt;div class="content" style="color: #fdfdfd; font-size: 20px; text-align: center" *ngIf="!uploaderLoading"&gt;
              &lt;span *ngIf="uploader?.queue?.length &lt; 1" style="color: #111"&gt;No images uploaded&lt;/span&gt;
              &lt;span *ngFor="let item of uploader.queue" style="color: #111"&gt;{{item?.file?.name}}&lt;/span&gt;
            &lt;/div&gt;
          &lt;/section&gt;
          &lt;footer class="modal-card-foot"&gt;
            &lt;button class="button is-success" (click)="onUploadClicked()"&gt;Save&lt;/button&gt;
            &lt;button class="button" (click)="onCloseModal()"&gt;Cancel&lt;/button&gt;
          &lt;/footer&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    `,
    styleUrls: ['../transaction.component.css']
  })
  export class RenterPostEvalComponent implements OnInit, DoCheck {
    renterPostEvalActive = false;
    renterPostEval: string;
    transaction: Transaction;
    file: any;
    uploaderLoading = false;
    devUrl = 'XXXXX';
    url = 'XXXXX';
    public uploader:FileUploader = new FileUploader({url: this.devUrl, itemAlias: 'photo'});
  
    constructor(
      private router: Router,
      private uploadS: UploadService,
      private tranS: TransactionService,
      private uis: UiService) {}
  
    ngOnInit() {
      this.uploader.onAfterAddingFile = (file)=&gt; { console.log(file); file.withCredentials = false; };
  
      this.uploader.onCompleteItem = (item:any, response:any, status:any, headers:any) =&gt; {
        let awsUrl = 'XXXX' + response;
        this.onUpdateTransaction(awsUrl);
      };
    }
  
    ngDoCheck() {
      this.renterPostEvalActive = this.uis.onReturnEval('renterPost');
    }
  
    // pre eval
    onUpdateTransaction(fileName: string) {
      this.transaction = this.tranS.onReturnTransactionService();
      this.transaction.renterPostReview = this.renterPostEval;
      this.transaction.renterPostFilled = true;
      this.transaction.renterPostImages.push(fileName);
      this.tranS.onUpdateTransaction(this.transaction.id, this.transaction)
        .subscribe(update =&gt; {
          console.log(update);
          this.uploaderLoading = false;
          this.router.navigate(['/profile']);
          this.uis.onFlash('Post Evaluation Posted Successfully', 'success');
          this.onCloseModal();
        }, resp =&gt; {
          console.log(resp);
          this.uis.onFlash('Error Posting Post Evaluation', 'error');
        })
    }
  
    onUploadClicked() {
      this.uploader.uploadAll();
      this.uploaderLoading = true;
    }
  
    // UI
  
    styleObject(s: string): Object {
      if (s === 'renterPost') {
        if (this.renterPostEvalActive) {
          return {'height': '100%'};
        } else {
          return {'height': 0};
        }
      }
    }
  
    onCloseModal(){
      this.uis.onCloseModal('renterPost');
    }
  
  
  
  }
  </code></pre>
  
  <p>A note about these files, they both are used at the same time because they are modals. Here is the file they are called in as directives.</p>
  
  <pre><code>&lt;!-- evaluation modals --&gt;
  &lt;app-owner-post-eval&gt;&lt;/app-owner-post-eval&gt;
  &lt;app-renter-post-eval&gt;&lt;/app-renter-post-eval&gt;
  &lt;app-report-issue&gt;&lt;/app-report-issue&gt;
  &lt;app-message-modal&gt;&lt;/app-message-modal&gt;
  
  
  &lt;!-- Main container --&gt;
  &lt;nav class="level"&gt;
    &lt;!-- Left side --&gt;
    &lt;div class="level-item"&gt;
      &lt;h3 class="title"&gt;Transaction&lt;/h3&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>I've tried looking at the code and spotting any differences but it is not working. Can anyone help?</p>