Angular2 Component: Button that you have to click twice to perform an action (for confirmation)

confirm-button.ts

import {Component, Input} from '@angular/core';

@Component({
  selector: 'confirm-button',
  template: `
  <button class="ui {{size}} {{color}} button" (click)="clickHandler($event)">
    <i *ngIf="!isClickedOnce && icon" class="{{icon}} icon"></i>
    {{isClickedOnce? confirmText : text}}
  </button>
`
})
export class ConfirmButtonComponent {

  @Input() size: string = '';
  @Input() element: string = 'button';
  @Input() color: string = '';
  @Input() onClick: Function = () => {};
  @Input() timeout: number = 1000;
  @Input() icon: string;
  @Input() text: string;
  @Input() confirmText: string = 'Confirm';

  private isClickedOnce: boolean = false;
  private timeoutObject: any;

  private clickHandler(e: Event): void {
    e.preventDefault();
    if(!this.isClickedOnce){
      this.isClickedOnce = true;
      if(this.timeout > 0){
        console.log('Resetting this in ' + this.timeout + 'ms');
        this.timeoutObject = setTimeout(()=>this.resetButton(), this.timeout);
      }
    } else {
      this.resetButton();
      this.onClick();
    }
  }

  private resetButton(): void {
    this.isClickedOnce = false;
    if(this.timeoutObject) {
      clearTimeout(this.timeoutObject);
      this.timeoutObject = undefined;
    }
  }

}

Notes:

• This is designed for Semantic UI, but you can easily change up the HTML and the inputs to match your needs.

Example usage:

  <confirm-button size="big" color="red" [onClick]="confirmButtonHandler()" icon="delete" text="Delete"></confirm-button>

confirmButtonHandler(): Function {
  return () => runMyActualHandler()
}