title: How can I maintain the state of dialog box with progress all over my Angular 2 application?
body: <p>I would like to keep the state of the Md Dialog alive even I close the dialog.So that I can keep the upload status active all over the application. My plan is to store the upload response in the service to maintain the upload progress and an icon will be given in the toolbar.The dialog box reinitializes everytime. How can I maintain the state of dialog box with upload progress all over the application?</p>
  
  <h3>app.component.ts</h3>
  
  <pre><code>import { Component, NgZone, Inject, EventEmitter } from '@angular/core';
  import { NgUploaderOptions, UploadedFile, UploadRejected } from 'ngx-uploader';
  import { MdDialog, MdDialogRef, MdDialogConfig } from '@angular/material';
  import { Router } from '@angular/router';
  import { UploadService } from './upload.service';
  import './operators';
  
  @Component({
    moduleId: module.id,
    selector: 'sd-app',
    templateUrl: 'app.component.html',
  })
  export class AppComponent {
    temp:any;
    dialogRef: MdDialogRef&lt;DialogComponent&gt;;
    config: MdDialogConfig = {
      disableClose: true
    };
    constructor(public dialog: MdDialog, private router: Router, public uploadService: UploadService ) {
    this.temp = this.uploadService.getUpload();
    }
  
    openDialog() {
      this.dialogRef = this.dialog.open(DialogComponent, this.config);
    }
  
  
  }
  </code></pre>
  
  <h3>app.component.html</h3>
  
  <pre><code> &lt;md-progress-bar mode="determinate"
                         [value]="temp.progress.percent"
                         color="primary"
                         class="progress-bar-margins"&gt;
        &lt;/md-progress-bar&gt;
        &lt;span&gt;{{temp.progress.percent}}%&lt;/span&gt;
  </code></pre>
  
  <h3>Dialog Component</h3>
  
  <pre><code>export class DialogComponent {
    options: NgUploaderOptions;
    response: any;
    sizeLimit: number = 1024 * 1024 * 50; // 50MB
    previewData: any;
    errorMessage: string;
    inputUploadEvents: EventEmitter&lt;string&gt;;
    temp:any;
    constructor(@Inject(NgZone) private zone: NgZone, public uploadService: UploadService) {
  
      this.options = new NgUploaderOptions({
          url: 'http://api.ngx-uploader.com/upload',
          filterExtensions: false,
          allowedExtensions: ['dsn'],
          data: { userId: 12 },
          autoUpload: false,
          fieldName: 'file',
          fieldReset: true,
          maxUploads: 2,
          method: 'POST',
          previewUrl: true,
          withCredentials: false
      });
  
      this.inputUploadEvents = new EventEmitter&lt;string&gt;();
    }
    startUpload(view:any) {
      this.inputUploadEvents.emit('startUpload');
    }
    beforeUpload(uploadingFile: UploadedFile): void {
      if (uploadingFile.size &gt; this.sizeLimit) {
        console.log('File is too large!');
        this.errorMessage = 'File is too large! Please select valid file';
        uploadingFile.setAbort();
      }
    }
  
    handleUpload(data: any) {
        setTimeout(() =&gt; {
          this.zone.run(() =&gt; {
            this.response = data;
            this.uploadService.uploadData = data;
            this.temp = this.uploadService.getUpload();
            if (data &amp;&amp; data.response) {
              this.response = JSON.parse(data.response);
            }
          });
        });
      }
  
      handlePreviewData(data: any) {
      this.previewData = data;
    }
    }
  </code></pre>
  
  <h3>upload.component.html</h3>
  
  <pre><code> &lt;button type="button" class="start-upload-button" (click)="startUpload()"&gt;Start Upload&lt;/button&gt;
  &lt;/div&gt;
  &lt; &lt;div *ngIf="previewData &amp;&amp; !response"&gt;
    &lt;img [src]="previewData"&gt;
  &lt;/div&gt; 
  &lt;div&gt;
   &lt;md-progress-bar mode="determinate"
          [value]="temp.progress.percent"
          color="primary"
          class="progress-bar-margins"&gt;
          &lt;/md-progress-bar&gt;
          &lt;span&gt;{{temp.progress.percent}}%&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h3>upload.service.ts</h3>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { BehaviorSubject } from 'rxjs/Rx';
  import { Observable } from 'rxjs';
  import { Subject } from 'rxjs/Rx';
  
  @Injectable()
  export class UploadService {
    uploadData :any;
    constructor() {
      console.log('Global Service initialised');
      }
      getUpload() {
          return this.uploadData;
      }
  }
  </code></pre>