как создать таймер обратного отсчета при нажатии кнопки в angular

Question

Привет, я пытаюсь забыть пароль на экране angular

sinario

1. Пользователь вводит свой электронный идентификатор и нажимает кнопку подтверждения.
2. после нажатия кнопки отправки кнопка должна быть отключена и показывать таймер обратного отсчета в течение 2 минут. Я приложил снимки экрана
3. через 2 минуты должен вернуться в нормальное состояние

до нажатия и после нажатия после нажатия

Forgotpassword.component. html

<form class="form-horizontal login100-form m-auto" [formGroup]="loginForm">
          <p class="h4 login-header">Forgot password</p>
          <div class="form-group form-group-lg">
            <mat-form-field [appearance]="'outline'" class="w-100">
              <mat-label>Email-id</mat-label>
              <input matInput formControlName="user_email" #t>
            </mat-form-field>
          </div>
          <div class="form-group form-group-lg">
            <button type="button" class="btn login-button btn-block"
                    (click)="onResetPassword()" [disabled]="f.user_email.errors && f.user_email.errors.required">
              Send password reset
              link
            </button>
          </div>
          <div class="contact100-form-checkbox ">
            <div class="d-flex">
              <div class="mr-2">
                <a (click)="forgetpassword = false" class="txt1"
                   style="   font-size: 20px;">Sign-in</a>
              </div>
            </div>
          </div>
        </form>

Forgotpassword.component.ts

onResetPassword() {
const email = this.loginForm.value.user_email;

console.log(this.loginForm.controls.user_email.errors);
this.userService.gerResetPassword(email).subscribe(data => {
    alert(JSON.stringify(data));
    console.log(data);
    // this.show = true;
  },
  error => {
    console.log(error);
  }
);

}

Я нашел несколько источников в Интернете, но мне ничего не помогло ...

Answer 1

https://stackblitz.com/edit/angular-kswlfw

U может использовать Observable из библиотеки rx js.

Создать интервал

this.timer = interval(1000)
      .pipe(
        takeUntil(this.ispause)
      );

    this.timerObserver = {

      next: (_: number) => {  
         if(this.time==0){this.ispause.next;}
          this.time -= 1;        
      }
    };

и вызвать его в нажмите функцию

<button (click)="goOn()"> {{secondsToHms(time)}}</button>
goOn() {

    this.timer.subscribe(this.timerObserver);
  }

, и эта функция предназначена для отображения таймера формата

secondsToHms(d) {
    d = Number(d);
    var m = Math.floor(d % 3600 / 60);
    var s = Math.floor(d % 3600 % 60);

    var mDisplay = m > 0 ? m + (m == 1 ? ": " : " : ") : "00";
    var sDisplay = s > 0 ? s + (s == 1 ? "" : "") : "00";
    return mDisplay + sDisplay; 
}