How to use $interval service in AngularJS

Revati S Misra 468 15 May 2024

Revati S Misra

Student

Skilled in SEO, content writing, and digital marketing. Completed several years of working in many organizations including multinational companies. I love to learn new things in life that keep me motivated.

1 Answers

Ashutosh Patel 15 May 2024

In AngularJS, the $interval service is used to run a specified function repeatedly at a specified interval. It is similar to setInterval in JavaScript but integrated with AngularJS's digest cycle, which means it triggers AngularJS's digest cycle after each interval, ensuring that any changes to the scope are reflected in the view.

Step to use $interval service

Inject $interval: First, you need to inject the $interval service into your controller, service, or directive.

angular.module('myApp').controller('myController', function($scope, $interval) {
    // Your controller logic here
});

Using $interval: Use the $interval service to set up an interval and specify the function to be executed and the interval duration in milliseconds.

var myInterval = $interval(function() {
    // Code to be executed repeatedly
}, 1000); // Interval duration in milliseconds (e.g., 1000 ms = 1 second)

Stopping the Interval: You can stop the interval by calling the $interval.cancel() function and passing the interval promise returned by $interval.

$interval.cancel(myInterval);

Example-

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>$interval Service Example</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>

<div ng-controller="myController">
    <div class="container">
        <p class="fw-semibold">Current Date is : {{currentDate}}</p>
        <p class="fw-semibold">Current Time is : {{currentTime}}</p>
        <!-- click button to stop time interval -->
        <button data-ng-click="stopInterval()" class="btn btn-primary p-2 px-3 rounded-3">Stop Interval</button>
    </div>
</div>

<script>
angular.module('myApp', [])
.controller('myController', function($scope, $interval) {
    // Function to update current time
    function updateTime() {
        $scope.currentTime = new Date().toLocaleTimeString();
    }

    // Update current time every second using $interval
    var myInterval = $interval(updateTime, 1000);

    // Stop interval automatically after 5 minute
    $interval(function() {
        $interval.cancel(myInterval);
    }, 500000);

    // show current date
    $scope.currentDate = new Date().toLocaleDateString();

    // function call when button clicked
    $scope.stopInterval = function(){
        $interval(function() {
            $interval.cancel(myInterval);
        }, 0);
    }
});

</script>
</body>
</html>

forum

How to use $interval service in AngularJS

Can you answer this question?

1 Answers