Use Operation Delete Modal in List Component.

src/operations/operationRow.component.ts

@@ -2,14 +2,15 @@
 import { CurrencyPipe } from '@angular/common';
 import { Component, Inject, Input, Output, EventEmitter } from '@angular/core';
 
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { ToastrService } from 'ngx-toastr';
 
-var operationFormTmpl   = require('./operation.form.tmpl.html'),
-    operationDeleteTmpl = require('./operation.delete.tmpl.html');
+var operationFormTmpl   = require('./operation.form.tmpl.html');
 
 import { Account } from '../accounts/account';
 import { Operation } from './operation';
 import { OperationService } from './operation.service';
+import { OperationDeleteModalComponent } from './operationDeleteModal.component';
 
 @Component({
   selector: 'tr[operation-row]',
@@ -80,6 +81,7 @@ export class OperationRowComponent {
   constructor(
     private operationService: OperationService,
     private toastrService: ToastrService,
+    private modal: NgbModal,
     @Inject('$modal') private $modal,
   ) {}
 
@@ -110,26 +112,16 @@ export class OperationRowComponent {
   }
 
   confirmDelete(operation) {
-    var title = "Delete operation #" + operation.id;
+    const modal = this.modal.open(OperationDeleteModalComponent);
 
-    this.$modal({
-      templateUrl: operationDeleteTmpl,
-      controller: function($scope, title, operation, $delete) {
-        $scope.title = title;
-        $scope.operation = operation;
-        $scope.$delete = () => {
-          $scope.$hide();
-          $delete($scope.operation);
-        };
-      },
-      locals: {
-        title: title,
-        operation: operation,
-        $delete: (operation: Operation) => {
-          this.delete(operation);
-        }
-      }
-    });
+    modal.componentInstance.operation = this.operation;
+
+    var id = operation.id;
+
+    modal.result.then((operation: Operation) => {
+      this.delete(operation);
+    }, (reason) => {
+    })
   };
 
   delete(operation) {