Angular 2 change detection issue with recursive function

Question

I am encountering a strange issue with Angular 2 change detection when using a recursive function to read user drag & dropped files.

Refer to here for the example:

File drop example: plnkr.co

In the example above, there are two file drop areas. The top area uses a recursive function to read all files in user dropped items. The bottom area simply use dataTransfer.files.

The files dropped is supposed to be displayed bellow. However, change detection only works for the bottom drop area.

This is a simplified version of my actual application. I am not keen to use ChangeDetectorRef to trigger the detection (I know it will work for the plunker example).

Is there a better way to read all the files dropped in (including files in subfolders) with webkitGetAsEntry()? Or another way will work with Angular change detection?

I am on Angular 2.4.9.

Answer 1

Replace the code in app.ts with the code below and it will work. Zone.js will detect changes after the callback has been executed.

//our root app component
import {Component, NgModule,NgZone} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { FileDropDirective } from './file.drop.directive'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <div file-drop class="drop-area" readAsItems="yes" 
      (droppedFiles)="onFilesDrop($event)">Recursive func</div>
      <div file-drop class="drop-area" 
      (droppedFiles)="onFilesDrop($event)">Non-recursive func</div>
      <div *ngFor="let f of files">{{ f }}</div>
    </div>
  `,
  styles: [`
    .drop-area {
      width: 100%;
      height: 20vh;
      background-color: #f1f1f1;
      border: 1px solid red;
      margin: 5px 0;
    }
  `]
})
export class App {
  name:string;
  files: string[];
  constructor(private zone:NgZone) {
    this.name = 'Angular2'
    this.files = [];
  }

  onFilesDrop(files) {
    this.zone.run(()=>{
      files.forEach((f) => {
        this.files.push(f.name);
      })
      console.log(this.files);
    });
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, FileDropDirective ],
  bootstrap: [ App ]
})
export class AppModule {}