Use Schedule Delete Modal Component in scheduleRow Component.

src/scheduler/schedule.delete.tmpl.html

@@ -1,25 +0,0 @@
-<!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
-<div class="modal top am-fade" tabindex="-1" role="dialog" aria-hidden="true">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h3 class="modal-title" id="modal-title">{{ title }}</h3>
-      </div>
-
-      <div class="modal-body" id="modal-body">
-        <p>Voulez-vous supprimer l'opération #{{ operation.id }} ayant pour libellé :<br/>{{ operation.label }}
-        </p>
-      </div>
-
-      <div class="modal-footer">
-        <button class="btn btn-danger" type="button" ng-click="$delete()">
-          Supprimer
-        </button>
-
-        <button class="btn btn-default" type="button" ng-click="$hide()">
-          Annuler
-        </button>
-      </div>
-    </div>
-  </div>
-</div>

src/scheduler/scheduleRow.component.ts

@@ -3,13 +3,14 @@ import { CurrencyPipe } from '@angular/common';
 import { Component, Inject, Input, Output, EventEmitter, OnInit } from '@angular/core';
 
 import { Logger } from '@nsalaun/ng-logger';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { ToastrService } from 'ngx-toastr';
 
+import { ScheduleDeleteModalComponent } from './scheduleDeleteModal.component';
 import { ScheduleService } from './schedule.service';
 import { Schedule } from './schedule';
 
-var scheduleFormTmpl   = require('./schedule.form.tmpl.html'),
-    scheduleDeleteTmpl = require('./schedule.delete.tmpl.html');
+var scheduleFormTmpl   = require('./schedule.form.tmpl.html');
 
 @Component({
   selector: 'tr[schedule-row]',
@@ -59,7 +60,8 @@ export class ScheduleRowComponent {
     private scheduleService: ScheduleService,
     private logger: Logger,
     private toastrService: ToastrService,
-    @Inject('$modal') private $modal
+    @Inject('$modal') private $modal,
+    private ngbModal: NgbModal
   ) {}
 
   save(schedule: Schedule) {
@@ -77,23 +79,15 @@ export class ScheduleRowComponent {
   confirmDelete() {
     var title = "Delete schedule #" + this.schedule.id;
 
-    this.$modal({
-      templateUrl: scheduleDeleteTmpl,
-      controller: function($scope, title, schedule, $delete) {
-        $scope.title = title;
-        $scope.operation = schedule;
-        $scope.$delete = () => {
-          $scope.$hide();
-          $delete($scope.operation);
-        };
-      },
-      locals: {
-        title: title,
-        schedule: this.schedule,
-        $delete: (schedule) => {
-          this.delete(schedule);
-        }
-      }
+    const modal = this.ngbModal.open(ScheduleDeleteModalComponent, {
+      windowClass: 'in'
+    });
+
+    modal.componentInstance.schedule = this.schedule;
+
+    modal.result.then((schedule: Schedule) => {
+      this.delete(schedule);
+    }, (reason) => function(reason) {
     });
   }