How do I stop setInterval in Angular

Question

I have an array of object, I should set isChecked property to true to first tree elements of array. After index of array is 3, I should redirect to another page, but setInterval is still running

public sendApplication(): void {
    if (this.formService.isFormValid(this.formGroup)) {
        this.dialogProcessing
            = this.dialog.open(FoDialogBankVerificationComponent, {
            width: '500px',
            disableClose: true,
            data: this.checkBoxValues,
        });
        this.submit()
            .pipe(
                take(1))
            .subscribe(res => {
                    this.checkBoxValues.forEach((checkbox, index) => {
                        this.interval = interval(1000 * index).subscribe(() => {
                            checkbox.isChecked = true;
                            console.log(index);
                            if (res.id === 1700) {
                                if (index === this.checkBoxValues.length - 1) {
                                    this.status = res.id;
                                    this.dialogProcessing.close();
                                    this.interval.unsubscribe();
                                }
                            } else {
                                const random: number = Math.floor(1 + Math.random() * 4);
                                if (index === random) {
                                    this.dialogProcessing.close();
                                    this.interval.unsubscribe();
                                    this.navigationService.navigateToDeniedPage();
                                }
                            }
                        });
                    });
                },
                () => {
                    this.dialogProcessing.close();
                    this.notificationService.showGetErrorNotification();
                });
    }
}

Answer 1

I would suggest to use clearInterval to stop setinterval

Please checkout following for implementation

How to use clearInterval() in Angular 4

Answer 2

Use observable to do it . I created one demo countdown for this in link https://stackblitz.com/edit/angular-gq9zvk

create properties

  ispause = new Subject();
  timer: Observable<number>;
  timerObserver: PartialObserver<number>;

to start timer

  this.timer.subscribe(this.timerObserver); 

to create timer

this.timer = interval(1000)
      .pipe(
        takeUntil(this.ispause) // take until used to stop it
      );

    this.timerObserver = {

      next: (_: number) => {  
         //u cann call function here      
      }
    };

to stop this.ispause.next();