confirm.component.html

<div class="modal show fade in" role="alert" style="z-index: 2420 !important;">
  <div class="modal-backdrop show fade in" style="z-index: 2400 !important;"></div>
  <div class="modal-dialog modal-md" style="z-index: 2500 !important;">
    <div class="modal-content">
      <div class="modal-header">
        <h2>Confirm {{ actionName }} of {{ itemName }}</h2>
      </div>
      <div class="modal-body">
        <p>Are you sure you want to {{ actionVerb }} this {{ entityName }}?</p>
        <p>{{ itemName }}</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-success pull-right m-r-xs" (click)="doConfirm()" [disabled]="loading">
          <i class="fa fa-lg fa-fw fa-check"></i>Confirm</button>
        <button class="btn btn-danger pull-right m-r-xs" (click)="doCancel()">
          <i class="fa fa-lg fa-fw fa-close"></i>Cancel</button>
      </div>
    </div>
  </div>
</div>

confirm.component.ts

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

@Component({
  selector: 'confirm',
  template: require('./confirm.component.html')
})
export class ConfirmComponent {
  @Input() itemName: string;
  @Input() entityName: string = null;
  @Input() actionName: string;
  @Input() actionVerb: string = null;

  @Output() cancel = new EventEmitter();
  @Output() confirm = new EventEmitter();
  @HostListener('document:keyup', ['$event'])

  private loading = false;

  handleKeyboardEvent(event: KeyboardEvent) {
    if(event.key == 'Escape')
      this.doCancel();
  }

  doCancel() {
    this.loading = true;
    this.cancel.emit();
  }

  doConfirm() {
    this.loading = true;
    this.confirm.emit();
  }

  constructor() { }

  ngOnInit() {
    if (this.actionVerb === null) this.actionVerb = this.actionName.toLowerCase();
    if (this.entityName === null) this.entityName = 'item';
  }
}

ticket-lock.component.ts

@Component({
  selector: 'ticket-lock-control',
  template: `
<confirm *ngIf="locking" (confirm)="confirmLock()" (cancel)="cancel()" [itemName]='"Ticket " + ticketNumber' actionName="Lock"></confirm>
<confirm *ngIf="unlocking" (confirm)="confirmUnlock()" (cancel)="cancel()" [itemName]='"Ticket " + ticketNumber' actionName="Unlock"></confirm>
<button class="btn btn-success" *ngIf="! locked" title="Lock"
    accessLevel="Lock / Unlock Tickets" [disabled]="loading" (click)="lockTicket($event)">
  <i class="fa fa-lg fa-lock "></i> Lock Ticket</button>
<button class="btn btn-warning" *ngIf="!!locked" title="Unlock"
    accessLevel="Lock / Unlock Tickets" [disabled]="loading" (click)="unlockTicket($event)">
  <i class="fa fa-lg fa-unlock-alt"></i> Unlock</button>
`
})
export class TicketLockComponent {

  @Input() jobId: string;
  @Input() ticketId: string;
  @Input() locked: boolean;
  @Input() requireConfirm: boolean = false;

  private loading = true;
  private locking = false;
  private unlocking = false;
  private ticketNumber: string;

  constructor(
    private authenticationService: AuthenticationService,
    private store: Store<any>
  ) {}

  private lockTicket(e) {
    e.stopPropagation();
    if (this.loading) return;
    this.loading = true;
    if (this.requireConfirm)
      this.locking = true;
    else
      this.confirmLock();
  }

  private confirmLock() {
    
  }

  private unlockTicket(e) {
    e.stopPropagation();
    if (this.loading) return;
    this.loading = true;
    if (this.requireConfirm)
      this.unlocking = true;
    else
      this.confirmUnlock();
  }

  private confirmUnlock() {
    
  }

  private cancel() {
    this.locking = false;
    this.unlocking = false;
    this.loading = false;
  }
}