How to stop interval in Angular 7?

set time interval in angular 7
angular 7 interval unsubscribe
how to stop timer in angular 7
clearinterval not working
how to stop setinterval in angular
rxjs interval
javascript setinterval stop itself
remove interval angular 6

I have a function that emits values continuously.

What I want??

If Math.sign condition is fulfilled, I am redirecting user to another screen and displaying a toast message.

But right now, the toast message is displayed continuously, because interval is continuous.

What I tried?

this.subscription.unsubscribe() inside if(Math.sign) condition, but it did not work.

Any suggestions that how can I stop interval in the following code??

startTimer(validUntil: string) {
    this.counter$ = interval(1000).pipe(
        map((x) => {
            this.diff = Math.floor((new Date(validUntil).getTime() - new Date().getTime()) / 1000);

            if (Math.sign(this.diff) == -1) {
                //Tried this.subscription.unsubscribe() here

                // Redirects me to another component
            return x;

    this.subscription = this.counter$
        .subscribe((x) => {
            this.message$ = this.dhms(this.diff);

goBack(requestExpired: boolean) {
    if (requestExpired == true) {

Imho, takeWhile with condition inside is the most obvious approach.


startTimer(validUntil) {
  this.counter$ = interval(1000).pipe(

    // turn value emissions into diffs
    map(() => Math.floor((new Date(validUntil).getTime() - new Date().getTime()) / 1000)),

    // this is needed to terminate when condition is met
    takeWhile(diff => Math.sign(diff) !== -1),

    // when terminated on conditions -- navigate back

    // just in case if user navigates out before condition is met
  .subscribe(diff => {
    this.message$ = this.dhms(diff);

NOTE: Yet, I doubt that you need the counter$ at all. You could use only message$ stream with an async pipe, e.g.


startTimer(validUntil) {
  this.messages$ = interval(1000).pipe(
    // ...


<div>{ messages$ | async }</div>

Hope this helps

Angular 6: How to unsubscribe rsjx interval or timer?, subscribe returns a Subscription object that has unsubscribe as a method. One option that you have is: public intervallTimer = interval(5000);� Stop and Cancel (Destroy) the $interval function The $interval function can be cancelled by making use of its cancel method which accepts the object of the $interval function to be cancelled.

Have you tried to unsubscribe in ngOnDestroy method ?

How to stop interval in Angular 7? - Visdap, How to stop interval in Angular 7? Vis Team Maret 30, 2019. I have a function that emits values continuously. What I want?? If Math.sign condition is fulfilled, I am� A tutorial on using the Angular framework for front-end web development, showing how to use the timer function to executive code over a set time interval.

I think the best way is to use takeUntil pipe. Look at this example.

I rewrote your code using takeUntil and filter pipe. And I moved the goBack function to the complete callback of subscribe function.

startTimer(validUntil: string) {
  this.counter$ = interval(1000);
  const takeUntil$ = this.counter$.pipe(
    filter(x => {
      this.diff = Math.floor((new Date(validUntil).getTime() - / 1000);
      return Math.sign(this.diff) === -1;
    x => {
      this.message$ = this.dhms(this.diff);
    () => {

Window clearInterval() Method, Definition and Usage myVar = setInterval("javascript function", milliseconds); Then you will be able to stop the execution by calling the clearInterval() method. notified upon each tick of the interval, and will be resolved after countiterations, or run indefinitely if countis not defined. The value of the notification will be the To cancel an interval, call $interval.cancel(promise). In tests you can use $interval.flush(millis)to

As much as I know, the interval function stops emitting after unsubscription, I also have create a stackblitz example to demonstrate it.

For some reason, your code isn't calling the unsubscribe method, and I'd advise you to look for the problem here, maybe adding a debugger before calling unsubscribe to check if it's actually executed.

Also check that you are calling unsubscribe on the correct object, it must be subscription and not timer$, for example.

But I think it's out there's no doubt that the problem is in the code that you showed.

clearInterval() in angular Code Example, Get code examples like "clearInterval() in angular" instantly right from your google search results clearInterval(myInterval); //stop that interval� The ID value returned by setInterval () is used as the parameter for the clearInterval () method. Note: To be able to use the clearInterval () method, you must use a variable when creating the interval method: myVar = setInterval (" javascript function ", milliseconds ); Then you will be able to stop the execution by calling the clearInterval () method.

Actually, seems like what you need is to set a timer for a given duration, try

timer(0, 1000).pipe(

Where N is the difference in seconds between current time and validUntil. So

startTimer(validUntil) {
   // duration in seconds till invalid
  const duration = Math.floor((new Date(validUntil).getTime() - / 1000));

  this.messages$ = timer(0, 1000).pipe(
    // we take 1 more emission to encompass starting emission
    take(duration + 1)

    // once given number of seconds passed -- navigate back

    // just in case if user navigates out before condition is met
    // this is needed if you wont use |async pipe

    // map to display time
    map(value => this.dhms(duration - value))

And then apply | async pipe to the message$ in the template.

Hope this helps

javascript stop interval Code Example, var interval = setInterval(function() {. 2. console.log("Hello World");. 3. }, 1000);. 4. . 5. function stopInterval() {. 6. clearInterval(interval);. 7. } javascript stop� This tutorial explains how the timer services $timeout and $interval works in AngularJS, and how you can use them to schedule function calls.

AngularJS: API: $interval, stopFight(); } }, 100); }; $scope.stopFight = function() { if (angular.isDefined(stop)) { $interval.cancel(stop); stop = undefined; } }; $scope.resetFight = function()� is optimized for learning web technologies step by step. Examples might be simplified to improve reading and basic understanding.

[Solved-100% Working Code], Angular $Interval. Solution 3: An setInterval() returns an interval ID, which you can pass to clearInterval()� Different approaches to managing RxJS subscriptions in Angular applications lead to different trade-offs in terms of verbosity, robustness or simplicity. Let’s explore our options together!

Problem using Observable.interval() with Angular6 +RxJS 6, method inside service public getClients() { return Observable.interval(5000). I' m using Angular 6.0.0 with RxJS 6.2.2 but I've also installed rxjs-compat, not sure if Ex: async pipe gets new value and STOP, and only check that component. The setInterval() method calls a function or evaluates an expression at specified intervals (in milliseconds). The setInterval() method will continue calling the function until clearInterval() is called, or the window is closed. The ID value returned by setInterval() is used as the parameter for the clearInterval() method. Tip: 1000 ms = 1 second.

  • Where do you call this.subscription.unsubscribe()?
  • @martin Inside my if(Math.sign) condition
  • So it was probably never called
  • The function after that line is called and I am redirected back to another screen. So, this line is above that and it must have been called...
  • can you try that? after the redirection, your component will be destroyed and therefore you can unsubscribe in that life cycle event
  • I just tried and it does not work either :| I keep on getting continuous toasts
  • is OnDestroy interface implemented ?, here is draft i've made with a console.log…
  • Combination of ngOnDestroy and validUntil (by Vahid) has helped. Thanks
  • Still the same continuous toast
  • @MariumMalik Please log Math.sign(this.diff) === -1 in the filter pipe to see if this ever becomes true.
  • Yes, after few values, it's -1 and becomes true
  • @MariumMalik So then the this.goBack method should be called. If it's called and you're still getting toast messages, then there's a problem with this line: this.message$ = this.dhms(this.diff);. I don't have any idea what this line is doing.
  • Yes, the function is called and I am returned to another component with continuous toasts