I have a function that every second a guerrilla counts between 1 and 20.
I want to add 2 functions each function contains a button that allows me to increase the number by 1 each click (up) and decrease the number each click (down).
I tried to combine it with interval but was not successful

my stackblitz: https://stackblitz.com/edit/angular-ivy-zbrapb?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.css

The function that does a random number between 1 and 20:

  floor!: Observable<Number>;
  floorNumber = -1;

  ngOnInit(): void {
    this.floor = this.getNumbersInfinite();
  }

  getNumbersInfinite() {
    return interval(1000)
    .pipe(
      map(() => Math.floor(Math.random() * 20) + 1),
      tap(res =>this.floorNumber=res));
  }

Unsuccessful implement of up and down:

 up(){
    if (Number(this.floorNumber) < 20 && Number(this.floorNumber) >= 1) {
       return Number(this.floorNumber++);
    }
    return false;
  }
  down(){
    if (Number(this.floorNumber) < 20 && Number(this.floorNumber) >= 1) {
       return Number(this.floorNumber--);
    }
    return false;
  }

html:

<p>
  {{ floor | async }}
</p>

<input type="button" value="Up" (click)="up()" />
<input type="button" value="down" (click)="down()" />