Angular JS: Loading bar on CSV download from REST service

Question

I have the below code snippet, which calls REST service to download CSV.

var link = document.createElement('a');
link.setAttribute('href',rest_URL);
document.body.appendChild(link);
link.click();

Now I am planning to show loading bar upon link click until CSV downloaded to the browser. How to do it??

I tried to use $http, but i don't want to show the content as object, then convert to CSV.

Is there any Angular feature available to monitor the link click, and trigger the event upon link action completed?.

I have loading bar code, just need help on getting the action complete event after the response returned from anchor tag above, not via $http.

Some Angular expertise would be greatly helpful.

Unfortunately, no answers mentioned below have solved my problem. Hence, i didn't mark any answers as Accepted. — David Prasad
– David Prasad, Commented Jun 16, 2016 at 8:35

Community · Accepted Answer · 2017-05-23 12:06:46Z

There are several options to achieve what you want. Out of the box, here are some of them:

I personally use the last one, but be warned, that if you are going to use Angular Material, I suggest you use a stable version and not the release candidates :D

Here is some code to help you!

angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
  .config(function($mdThemingProvider) {})
  .controller('AppCtrl', ['$scope', '$interval',
    function($scope, $interval) {
      var self = this,
        j = 0,
        counter = 0;

      self.mode = 'query';
      self.activated = true;
      self.determinateValue = 30;
      self.determinateValue2 = 30;

      self.showList = [];

      /**
       * Turn off or on the 5 themed loaders
       */
      self.toggleActivation = function() {
        if (!self.activated) self.showList = [];
        if (self.activated) {
          j = counter = 0;
          self.determinateValue = 30;
          self.determinateValue2 = 30;
        }
      };

      $interval(function() {
        self.determinateValue += 1;
        self.determinateValue2 += 1.5;

        if (self.determinateValue > 100) self.determinateValue = 30;
        if (self.determinateValue2 > 100) self.determinateValue2 = 30;

        // Incrementally start animation the five (5) Indeterminate,
        // themed progress circular bars

        if ((j < 2) && !self.showList[j] && self.activated) {
          self.showList[j] = true;
        }
        if (counter++ % 4 == 0) j++;

        // Show the indicator in the "Used within Containers" after 200ms delay
        if (j == 2) self.contained = "indeterminate";

      }, 100, 0, true);

      $interval(function() {
        self.mode = (self.mode == 'query' ? 'determinate' : 'query');
      }, 7200, 0, true);
    }
  ]);


/**
Copyright 2016 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at http://material.angularjs.org/license.
**/

<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Angular Material Buffer Bar</title>

  <!-- CSS -->
  <link href="https://material.angularjs.org/1.1.0-rc.5/docs.css" rel="stylesheet" />
  <link href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.css" rel="stylesheet" />
</head>

<body>


    <!-- Buffer Bar, there are other types of bars you can pick, I chose this one!-->
  <div ng-controller="AppCtrl as vm" layout="column" layout-margin="" style="padding:25px;" ng-cloak="" class="progressLineardemoBasicUsage" ng-app="MyApp">

    <h4 class="md-title">Buffer</h4>

    <p>
      For operations where the user wants to indicate some activity or loading from the server, use the <b>buffer</b> indicator:
    </p>
    <md-progress-linear class="md-warn" md-mode="buffer" value="{{vm.determinateValue}}" md-buffer-value="{{vm.determinateValue2}}" ng-disabled="!vm.showList[0]"></md-progress-linear>

  </div>


  <!-- JavaScrip -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
  <script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.js"></script>
  <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  

</body>

</html>

Additionally, you also have loading screens !

https://material.angularjs.org/latest/demo/progressCircular

KRONWALLED · Accepted Answer · 2016-06-10 12:37:01Z

1

I am using Angular Loading Bar. It works automatically for $http.

answered Jun 10, 2016 at 12:37

KRONWALLED

1,44211 silver badges12 bronze badges

2 Comments

KRONWALLED Over a year ago

I don't think so as you will never get a callback from the operation. Is there any reason you don't want to use $http? I read your reason above but unfortunately I think I don't get it.

David Prasad Over a year ago

Yes, $http is returning me object rather than downloading CSV content to the browser. Hope some help sooner.

Bruno Diaz · Accepted Answer · 2016-06-10 12:54:17Z

0

I think you could use ng-click on the a tag to call a function on your controller that makes the callout, set a flag before the callout then change its state on the callback.

$scope.doCallout = function() {
   $scope.calloutInProggress = true;
   sendCallout(url, function(response) {
     // do whatever
     $scope.calloutInProggress = false;
     $scope.$apply();
   } 
}

SendCallout is a dummy function, use whatever you want.

answered Jun 10, 2016 at 12:54

Bruno Diaz

12 bronze badges

Collectives™ on Stack Overflow

Angular JS: Loading bar on CSV download from REST service

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related