Modal de confirmação com Angular e Boostrap

app.module.ts

import { ConfirmModalModule } from './shared/confirm-modal/confirm-modal/confirm-modal.module';
import { environment } from '../environments/environment';

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    AppRoutingModule,
    ConfirmModalModule // <-- Precisa adicionar o ConfirmModalModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

confirm-modal.component.html

<div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">{{ options.title}}</h4>
    <button type="button" class="close" aria-label="Close" (click)="cancel()" >
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="modal-body">
    <p [innerHTML]=options.message></p>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-primary" (click)="confirm()">{{ options.buttonOkText }}</button>
    <button type="button" class="btn btn-secondary" (click)="cancel()">{{ options.buttonCancelText }}</button>
</div>

confirm-modal.component.ts

import { ConfirmStateService } from './../shared/confirm-state.service';
import { ConfirmOptions } from './../shared/confirm-options';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-confirm-modal',
  templateUrl: './confirm-modal.component.html',
  styleUrls: ['./confirm-modal.component.scss']
})
export class ConfirmModalComponent {
  options: ConfirmOptions;

  constructor(private state: ConfirmStateService) { 
    this.options = state.options;
  }

  confirm() {
    this.state.modal.close();
  }

  cancel() {
    this.state.modal.dismiss();
  }
}

confirm-modal.module.ts

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { ConfirmTemplateDirective } from './../shared/confirm-template.directive';
import { ConfirmModalComponent } from './confirm-modal.component';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [
    ConfirmModalComponent,
    ConfirmTemplateDirective
  ],
  imports: [
    CommonModule,
    NgbModule
  ],
  exports: [
    ConfirmModalComponent,
    ConfirmTemplateDirective
  ]
})
export class ConfirmModalModule { }

confirm-options.ts

export interface ConfirmOptions {
    title: string;
    message: string;
    buttonOkText: string;
    buttonCancelText: string;
}

confirm-state.service.ts

import { ConfirmOptions } from './confirm-options';
import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
import { Injectable, TemplateRef } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ConfirmStateService {
  options: ConfirmOptions;
  modal: NgbModalRef;
  template: TemplateRef<any>;
}

confirm-template.directive.ts

import { ConfirmStateService } from './confirm-state.service';
import { Directive, TemplateRef } from '@angular/core';

@Directive({
  selector: '[confirm]'
})
export class ConfirmTemplateDirective {

  constructor(confirmTemplate: TemplateRef<any>, state: ConfirmStateService) { 
    state.template = confirmTemplate;
  }

}

confirm.service.ts

import { ConfirmOptions } from './confirm-options';
import { ConfirmStateService } from './confirm-state.service';
import { Injectable } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Injectable({
  providedIn: 'root'
})
export class ConfirmService {

  constructor(private modalService: NgbModal, private state: ConfirmStateService) { }

  /**
   * Opens a confirmation modal
   * @param options the options for the modal (title and message)
   * @returns {Promise<any>} a promise that is fulfilled when the user chooses to confirm, and rejected when
   * the user chooses not to confirm, or closes the modal
   */
  confirm(options: ConfirmOptions): Promise<any> {
    this.state.options = options;
    this.state.modal = this.modalService.open(this.state.template);
    return this.state.modal.result;
  }
}

exemplo-de-uso.ts

import { ConfirmService } from './../../shared/confirm-modal/shared/confirm.service';
import { Component } from '@angular/core';

@Component({
  selector: 'app-exemplo',
  templateUrl: './exemplo.component.html',
  styleUrls: ['./exemplo.component.scss']
})
export class ExemploComponent {
  
  constructor(private confirmService: ConfirmService) { }
  
  exemploDeUso() {
    this.confirmService
      .confirm(
          { 
            title: 'Titulo da Confirmação?', 
            message: `Você deseja reprovar o cadastro do aluno: <b>${name}</b>`, 
            buttonOkText: 'Reprovar cadastro', 
            buttonCancelText: 'Cancelar' 
          }).then(() => {
            // cai aqui qdo clica no botão ok
          }).catch(() => {
            // cai aqui qdo clica no botão cancelar
          });
  }
}