{"id":2127,"date":"2022-08-27T22:07:24","date_gmt":"2022-08-27T20:07:24","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=2127"},"modified":"2022-08-27T22:12:59","modified_gmt":"2022-08-27T20:12:59","slug":"how-to-use-reportprogress-in-httpclient-in-angular","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2022\/08\/27\/how-to-use-reportprogress-in-httpclient-in-angular\/","title":{"rendered":"How to use reportProgress in HttpClient in Angular"},"content":{"rendered":"\n

Let\u00b4s assume, we are downloading file using HTTP<\/code> POST<\/code> method. We want to call another method to show download progress to end user until file download complete. How to use reportProgress<\/code> in HttpClient<\/code> for this?<\/p>\n\n\n\n

<\/div>\n\n\n\n

Solution:<\/h4>\n\n\n\n
  1. We need to use\u00a0reportProgress: true<\/code><\/strong>\u00a0to show some progress of any\u00a0HTTP<\/code><\/strong>\u00a0request<\/li>
  2. If we want to see all events, including the progress of transferts\u00a0,\u00a0<\/span>we need to use\u00a0observe: 'events'<\/code><\/strong>\u00a0option as well and return an\u00a0Observable<\/code><\/strong>\u00a0of type\u00a0HttpEvent<\/code><\/strong>.<\/li>
  3. Then we can catch all the\u00a0events(DownloadProgress, Response..etc)<\/code><\/strong>\u00a0in the component method.<\/li><\/ol>\n\n\n\n
     downfile(file: any): Observable<HttpEvent<any>>{\n\n    const options = {\n        responseType: 'blob' as const,\n        reportProgress: true, \n        observe: \"events\" as const,\n        headers: new HttpHeaders({ 'Content-Type': 'application\/json' })\n    };\n  \n    return this.http.post(this.url , app, options);\n  }<\/code><\/pre>\n\n\n\n
    <\/p>\n\n\n\n
    Then in component we can catch all the events<\/code> as below.<\/strong><\/p>\n\n\n\n
    this.myService.downfile(file)\n    .subscribe(event => {\n\n        if (event.type === HttpEventType.DownloadProgress) {\n\n           const percentDone = Math.round(100 * event.loaded \/ event.total);\n            console.log(\"download in progress ====> \" + percentDone + \"%\");\n        }\n\n        if (event.type === HttpEventType.Response) {\n            console.log(\"donwload completed\");\n        }\n});<\/code><\/pre>\n\n\n\n
    <\/div>\n\n\n\n
    PS-1<\/strong>:  there are different kinds of HttpEvent<\/a><\/code>.<\/em><\/p>\n\n\n\n
    enum HttpEventType {\n  Sent\n  UploadProgress\n  ResponseHeader\n  DownloadProgress\n  Response\n  User\n}<\/code><\/pre>\n\n\n\n
    PS-2 :<\/strong> (OBSERVE<\/code> AND RESPONSE<\/code> TYPES) ==><\/em> The types of the observe<\/code> and response<\/code> options are string unions, rather than plain strings.<\/em><\/p>\n\n\n\n
    options: {\n  \u2026\n  observe?: 'body' | 'events' | 'response',\n  \u2026\n  responseType?: 'arraybuffer'|'blob'|'json'|'text',\n  \u2026\n}<\/code><\/pre>\n\n\n\n
    This can cause confusion. For example:<\/p>\n\n\n\n
    \/\/ this works\nclient.get('\/foo', {responseType: 'text'})\n\n\/\/ but this does NOT work\nconst options = {\n  responseType: 'text',\n};\nclient.get('\/foo', options)<\/code><\/pre>\n\n\n\n
    In the second case, TypeScript infers the type of options<\/code> to be {responseType: string}<\/code>. The type is too wide to pass to HttpClient.get<\/code> which is expecting the type of responseType<\/code> to be one of the specific<\/em> strings. HttpClient<\/a><\/code> is typed explicitly this way so that the compiler can report the correct return type based on the options you provided.<\/p>\n\n\n\n
    Use as const<\/code> to let TypeScript know that you really do mean to use a constant string type:<\/p>\n\n\n\n
    const options = {\n  responseType: 'text' as const,\n};\nclient.get('\/foo', options);<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
    Let\u00b4s assume, we are downloading file using HTTP POST method. We want to call another method to show download progress to end user until file download complete. How to use reportProgress in HttpClient for this? Solution: We need to use\u00a0reportProgress: true\u00a0to show some progress of any\u00a0HTTP\u00a0request If we want to see all events, including the progress of transferts\u00a0,\u00a0we need to use\u00a0observe: ‘events’\u00a0option […]<\/p>\n","protected":false},"author":1,"featured_media":1965,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37],"tags":[585,326,528,587,584,161,217,586],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2127"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=2127"}],"version-history":[{"count":6,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2127\/revisions"}],"predecessor-version":[{"id":2133,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2127\/revisions\/2133"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/1965"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=2127"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=2127"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=2127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}