confirm.component.ts raw

   1  import { AfterViewInit, Component, EventEmitter, Output } from '@angular/core';
   2  import * as bootstrap from 'bootstrap';
   3  
   4  @Component({
   5    // eslint-disable-next-line @angular-eslint/component-selector
   6    selector: 'lib-confirm',
   7    imports: [],
   8    templateUrl: './confirm.component.html',
   9    styleUrl: './confirm.component.scss',
  10  })
  11  export class ConfirmComponent implements AfterViewInit {
  12    @Output() yes = new EventEmitter<void>();
  13    @Output() no = new EventEmitter<void>();
  14  
  15    message: string | undefined;
  16    onYes: ((() => Promise<void>) | (() => void)) | undefined;
  17    modal: bootstrap.Modal | undefined;
  18  
  19    readonly idString = crypto.randomUUID();
  20  
  21    ngAfterViewInit(): void {
  22      const myModalEl = document.getElementById(this.idString);
  23      if (!myModalEl) {
  24        return;
  25      }
  26  
  27      this.modal = new bootstrap.Modal(myModalEl);
  28    }
  29  
  30    onClickYes() {
  31      this.modal?.hide();
  32      if (typeof this.onYes !== 'undefined') {
  33        this.onYes();
  34      }
  35    }
  36  
  37    show(message: string, onYes: (() => Promise<void>) | (() => void)): void {
  38      this.message = message;
  39      this.onYes = onYes;
  40      this.modal?.show();
  41    }
  42  }
  43