Show progress circular during $http post?

Question

What is the best way to use Angular Material\'s Progress circular component with a $http request?

I currently have the code like this below:

Progre

Answer 1

If you want to watch the progress of post data use uploadEventHandlers

There is an example.

$http({
    method: 'POST',
    url: '/uploadToFtp',
    headers: {
        'Content-Type': undefined
    },
    eventHandlers: {
        progress: function(c) {
            //console.log('Progress -> ' + c);
            //console.log(c);
        }
    },
    uploadEventHandlers: {
        progress: function(e) {
            //console.log('UploadProgress -> ' + e);
            //console.log(e);
            _self.progressValue = (e.loaded / e.total) * 100.0;
        }
    },
    data: postData,
    transformRequest: angular.identity
})
.then(callBack,errorCallBack)
.catch(errorCallBack);

Show the progress circular like this