Angular6 + ng-bootstrap で使えるモーダル表示サービス

app.module.ts

@NgModule({
  imports: [
    CommonModule,
    …
  ],
  declarations: [
    …
    MyModalConfirmContent], ←追加
  exports: [LayoutComponent],
  entryComponents: [MyModalConfirmContent] ←追加
})
export class AppModule { }

my-modal.service.ts

import { Injectable, Component, Input } from '@angular/core';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Injectable({
  providedIn: 'root'
})
export class MyModalService {
  constructor(private modalService: NgbModal) { }

  confirm(title: string, message: string, okCaption?: string, cancelCaption?: string): Promise<boolean> {
    const modalRef = this.modalService.open(MyModalConfirmContent);
    const component = modalRef.componentInstance as MyModalConfirmContent;
    if (component != null) {
      component.title = title;
      component.message = message;
      component.okCaption = okCaption || 'OK';
      component.cancelCaption = cancelCaption || 'Cancel';
    }

    return modalRef.result.then(result => {
      return true;
    }, reason => {
      return false;
    });
  }
}

@Component({
  template:
    `
<div class="modal-header">
  <h4 class="modal-title">{{title}}</h4>
  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('dissmiss')">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  <p>{{message}}</p>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-primary" (click)="activeModal.close('ok')">{{okCaption}}</button>
  <button type="button" class="btn btn-outline-dark" (click)="activeModal.dismiss('cancel')">{{cancelCaption}}</button>
</div>
  `
})
// tslint:disable-next-line
export class MyModalConfirmContent {

  @Input() title: string;
  @Input() message: string;
  @Input() okCaption = 'OK';
  @Input() cancelCaption = 'Cancel';

  constructor(public activeModal: NgbActiveModal) { }
}

my-top.component.ts

@Component({
  selector: 'app-my-top',
  templateUrl: './my-top.component.html',
  styleUrls: ['./my-top.component.scss']
})
export class MyTopComponent {

  constructor(
    private modal: MyModalService) { }

  async showConfirm() {
    const res = await this.modal.confirm('たいとる', 'もーだるですか？', 'はい', 'いいえ');
    console.log(`result = {res}`);
    if (!res) {
      return;
    }
  }
}

part-of-package.json

"dependencies": {
  "@angular/animations": "^6.0.3",
  "@angular/common": "^6.0.3",
  "@angular/compiler": "^6.0.3",
  "@angular/core": "^6.0.3",
  "@angular/forms": "^6.0.3",
  "@angular/http": "^6.0.3",
  "@angular/platform-browser": "^6.0.3",
  "@angular/platform-browser-dynamic": "^6.0.3",
  "@angular/router": "^6.0.3",
  "@ng-bootstrap/ng-bootstrap": "^2.2.0",
  "bootstrap": "^4.1.1",
  "core-js": "^2.5.4",
  "font-awesome": "^4.7.0",
  "moment": "^2.22.2",
  "ng-spin-kit": "^5.1.1",
  "ngx-loading": "^1.0.14",
  "rxjs": "^6.0.0",
  "zone.js": "^0.8.26"
},