Typescript loading icon directive

Question

Typescript loading icon directive

Seeking to create an AngularJS directive in TypeScript that wraps each $http get request with a boolean parameter "isShow" to monitor the request status and dynamically show/hide the HTML element depending on it (without utilizing $scope or $watch). Any suggestions on how to accomplish this? Thank you.

angularjs typescript promise directive

Answer 1

Answer №1

Implement the concept of the promise disposer pattern:

var spinnerSemaphore = 0;
function maintain(fn){
    spinnerSemaphore++;
    var result = $q.when(fn());
    fn().then(function(){ spinnerSemaphore--; }, 
            function(){ spinnerSemaphore--; });
    return result; 
}

This approach allows you to:

maintain(function(){
    return $http.get(...); 
});
maintain(function(){
    return $http.get(...); 
});
maintain(function(){
    return $http.get(...); 
});
maintain(function(){
    return $timeout(...); // this applies to other promises as well
});

Connect displaying the spinner to the variable spinnerSemaphore (where a value of 0 means hiding the spinner, and any value greater than 0 means showing it).

Answer 2

Implement the concept of the promise disposer pattern:

var spinnerSemaphore = 0;
function maintain(fn){
    spinnerSemaphore++;
    var result = $q.when(fn());
    fn().then(function(){ spinnerSemaphore--; }, 
            function(){ spinnerSemaphore--; });
    return result; 
}

This approach allows you to:

maintain(function(){
    return $http.get(...); 
});
maintain(function(){
    return $http.get(...); 
});
maintain(function(){
    return $http.get(...); 
});
maintain(function(){
    return $timeout(...); // this applies to other promises as well
});

Connect displaying the spinner to the variable spinnerSemaphore (where a value of 0 means hiding the spinner, and any value greater than 0 means showing it).

Answer 3

Answer №2

For those in search of a solo spinner, the task can be accomplished seamlessly by linking its visibility to ng-show (or any similar function) with $http.pendingRequests.length. This approach naturally requires access to either $http within scope or $rootScope.

Answer 4

For those in search of a solo spinner, the task can be accomplished seamlessly by linking its visibility to ng-show (or any similar function) with $http.pendingRequests.length. This approach naturally requires access to either $http within scope or $rootScope.

Typescript loading icon directive

Answer №1

Answer №2

Similar questions

Declaration of types for invoking the lodash `mapKeys` function

Error message thrown by Angular JS: [$injector:modulerr] – error was not caught

When a button is clicked in (Angular), it will trigger the highlighting of another button as a result of a value being modified in an array. Want to know the

Disabling dynamic color updates upon refresh

In ReactJS with TypeScript, declaring a constant response after calling the login function using the await keyword

Tips for preserving the Context API state when navigating between pages in Next.js

Exploring ngModel components with a specified class

An object in typescript has the potential to be undefined

Is it possible to execute an AngularJS project without using Gruntjs?

Invoke a function and assign it to an export variable

Display the message "Please complete all required fields" on the AngularJS href when the necessary fields have not been filled out

Is there a way to locate all projects impacted by `nx`?

Tips for sending the ampersand character (&) as a parameter in an AngularJS resource

Combining Bazel, Angular, and SocketIO Led to: Unforeseen Error - XMLHttpRequest Not Recognized as Constructor

TS Mapped Type: Dynamically exclude specific keys based on their values

Guide on including the angular value (id) in conjunction with repeating data-target for executing a function

Encountering an unexpected termination error when using Typescript, pg, Express, and Psql within a Docker container: "Error: Connection terminated unexpectedly"

Transferring data between two screens within an Ionic app by harnessing the power of angularJS

Having trouble getting the basic example of Angular UI-Router to work? Check out the complete code on Plunker for assistance

Tally up identical words without considering differences in capitalization or extra spaces