Angular Button Reset explanation

Question

TS Code:

    import { Component, OnInit, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-game-control',
  templateUrl: './game-control.component.html',
  styleUrls: ['./game-control.component.css']
})
export class GameControlComponent implements OnInit {
  @Output() intervalFired = new EventEmitter<number>();
  interval!: NodeJS.Timeout;
  lastNumber = 0;

  constructor() { }

  ngOnInit(): void {
  }

  onStartGame(){
    this.interval = setInterval(() =>{
      this.intervalFired.emit(this.lastNumber + 1);
      this.lastNumber++;
    }, 1000);
  }

  onPauseGame() {
    clearInterval(this.interval)
  }

  onResetGame() {
    console.log('Game will get refreshed')
    this.interval.refresh
  }
}

html code:

    <div class="btn-toolbar">
  <button class="btn btn-success" (click)="onStartGame()">Start game</button>
  <button class="btn btn-danger" (click)="onPauseGame()">Stop the game</button>
  <button class="btn btn-warning" (click)="onResetGame()">Reset the game</button>
</div>

I want to make a reset button i'm new to programming and angular and i couldnt find what i was searching for. Would love any example not sure if thats the right way to ask this question.

Answer 1

You need to clear your interval, reset the number and set again the interval by calling onGameStart method

onResetGame() {
    clearInterval(this.interval);
    this.lastNumber = 0;
    this.onStartGame();
}

clearInterval() is also from NodeJS.Timeout