angular-progress-http

import { Component, NgModule } from '@angular/core'; import { HttpModule } from '@angular/http'; import { ProgressHttpModule, ProgressHttp } from 'angular-progress-http'; import { BrowserModule } from '@angular/platform-browser'; @Component({ selector: 'app-root', template: ` <h1>HTTP Progress Demo</h1> <button (click)="uploadFile()">Upload Dummy File</button> <p>Upload Progress: {{ uploadProgress }}%</p> <p>Download Progress: {{ downloadProgress }}%</p> ` }) export class AppComponent { uploadProgress: number = 0; downloadProgress: number = 0; constructor(private http: ProgressHttp) {} uploadFile() { const formData = new FormData(); // Simulate a file or some data formData.append('data', 'some long string content to simulate a file for upload progress testing.'); this.http .withUploadProgressListener(progress => { console.log(`Uploading ${progress.percentage}%`); this.uploadProgress = progress.percentage; }) .withDownloadProgressListener(progress => { console.log(`Downloading ${progress.percentage}%`); this.downloadProgress = progress.percentage; }) .post('/api/upload', formData) // Replace with a real backend endpoint for testing .subscribe( (response) => { console.log('Upload complete!', response); this.uploadProgress = 100; this.downloadProgress = 100; }, (error) => { console.error('Upload failed!', error); this.uploadProgress = 0; this.downloadProgress = 0; } ); } } @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpModule, // Required for ProgressHttpModule ProgressHttpModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }