title: cordova.fileTransfer not updating page template Ionic2+Cordova
body: <p>I have created an Ionic2 App using cordova FileTransferplugin, i am downloading remote server file.</p>
  
  <p>Everything is working perfectly, but when I try to update template while fileTransfer.OnProgress event, the template is not updating the % downloaded.</p>
  
  <p>Pleas see this video for my problem.
  <a href="https://youtu.be/FKVnkYiOtgw" rel="nofollow">Ionic_youtube_link</a></p>
  
  <p>My Code is, logic is in downloadFile function</p>
  
  <pre><code>import {Component, AfterViewInit, ViewChild} from '@angular/core';
  import {NavController, NavParams, ViewController, Nav} from 'ionic-angular';
  
  import {Page, Platform} from 'ionic-angular';
  import {File, Device, Cordova, Transfer} from 'ionic-native';
  
  import { SafeResourceUrl, DomSanitizationService } from '@angular/platform-browser';
  
  @Component({
    templateUrl: 'build/pages/video-download-modal/video-download-modal.html',
    providers: [File, Transfer]
  })
  export class VideoDownloadModal {
    selectedItem: any;
    @ViewChild(Nav) nav: Nav;
  
    videoPathUrl: string;
    isPlatformReady: boolean;
    platformName: string;
    directoryName: string = "socialAppDir";
  
    totalVideoSize:number;
    totalDownloaded:number;
    totalPercent:string = "0%";
  
    constructor(public navCtrl: NavController, navParams: NavParams, private _viewController: ViewController, platform: Platform, private transfer:Transfer) {
      // If we navigated to this page, we will have an item available as a nav param
      if (platform.is('core')) {//if on dekstop
        console.log('dektop');
      } else {
        this.videoPathUrl = navParams.get('videoPath');
        console.log(this.videoPathUrl);
        platform.ready().then((readySource) =&gt; {
          this.isPlatformReady = true;
          console.log('ready 1234');
          const fs: string = cordova.file.externalRootDirectory;
          console.log(cordova.file.dataDirectory);
          this.platformName = Device.device.platform;
  
          File.checkDir(cordova.file.externalDataDirectory, this.directoryName).then(() =&gt; {
            console.log('directory exists');
            this.downloadFile();
          }, (error) =&gt; {
            console.log('directory not exists');
            this.createDirectory();
          })
  
        })
      }
    }
    dismiss() {
      let data = { 'foo': 'bar' };
      this._viewController.dismiss(data);
    }
  
    createDirectory():void{
      File.createDir(cordova.file.externalDataDirectory, this.directoryName, true).then(() =&gt; {
        console.log("created externalDataDirectory");
        this.downloadFile();
      },(error) =&gt; {
        console.log('some error happen')
      })
    }
  
    downloadFile = () =&gt; {
      console.log(this);
      let fileName: string = this.videoPathUrl.split("/").pop();
      let targetPath = cordova.file.externalDataDirectory + this.directoryName + "/" + fileName;
      console.log(targetPath);
      this.transfer.download(this.videoPathUrl, targetPath, true, {}).then(() =&gt; {
        console.log('video downloaded')
      }, (error) =&gt; {
        console.log(error)
      })
      this.transfer.onProgress((progress) =&gt; {
        console.log(this);
        this.totalVideoSize = progress.total;
        this.totalDownloaded = progress.loaded;
        this.totalPercent = ((progress.loaded / progress.total) * 100).toString();
  
        console.log(this.totalPercent);
      })
    }
  
    ionViewDidEnter() {
      console.log("enter login1");
    }    
  }
  </code></pre>
  
  <p>And HTML is</p>
  
  <pre><code>&lt;ion-content&gt;
  
  
  &lt;div id="modalContainer" class="abd"&gt;
      &lt;ion-spinner&gt;&lt;/ion-spinner&gt;
      &lt;br /&gt;
      {{**totalPercent**}}
      &lt;br /&gt;
      &lt;button dnager block (click)="dismiss()"&gt;Exit&lt;/button&gt;
    &lt;/div&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>The totalPercent value either has 0 or 100.But not updating.
  Please help.</p>