CODEWITHSUNDEEP
htmlangularjshttploading
Fearcoder
Fearcoder

Reputation: 788

How can I hide the loading spinner when the HTTP call is finished?

I have a simple HTTP get call with angularJS

  $http({
        method: 'GET',
        url: 'Dashboard/GetDashboard'
    }).then(function successCallback(response) {
        $scope.dashboard = response.data;           
    }, function errorCallback(response) {
        console.log(response);
    });

Sometimes the performance is very low when the dashboard is loading and I want to use a loading spinner from font-awesome. This is my HTML code on the index.

<i ng-hide="?" class="fa fa-refresh icon-options"></i>

I know I have to use ng-hide for it but I don't know what expression I have to use.

When the HTTP call is finished I want to hide the loading spinner.

Can someone point me in the right direction?

Kind regards

Upvotes: 1

Views: 761

Answers (2)

MSH
MSH

Reputation: 1287

Use some boolean variable and put it before your call and on success make it true like below : Using ng-hide

    $scope.isSpinnerHidden = false;
    $http({
            method: 'GET',
            url: 'Dashboard/GetDashboard'
        }).then(function successCallback(response) {
            $scope.dashboard = response.data;  
            $scope.isSpinnerHidden = true;
        }, function errorCallback(response) {
            console.log(response);
        }); 

<i ng-hide="isSpinnerHidden" class="fa fa-refresh icon-options"></i>

OR

Use ng-show like below 

$scope.isSpinnerHidden = true;
    $http({
            method: 'GET',
            url: 'Dashboard/GetDashboard'
        }).then(function successCallback(response) {
            $scope.dashboard = response.data;  
            $scope.isSpinnerHidden = false;
        }, function errorCallback(response) {
            console.log(response);
        }); 

<i ng-show="isSpinnerHidden" class="fa fa-refresh icon-options"></i>

Hope it helps !!

Upvotes: 1

Hrishikesh Kale
Hrishikesh Kale

Reputation: 6548

so here is the solution assign a scope variable 

$scope.loading = false;

when you do server call make this value true like 

$scope.loading = true;

and after your results come make it to $scope.loading = false;

and in HTML use 

<i ng-if="loading" class="fa fa-refresh icon-options"></i>

so whenever loading is true this tag will be visible.

Upvotes: 1

Related Questions