Use Schedule Edit Modal component in Schedule List component.

src/scheduler/scheduleList.component.ts

@@ -5,6 +5,7 @@ import { Logger } from '@nsalaun/ng-logger';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { ToastrService } from 'ngx-toastr';
 
+import { ScheduleEditModalComponent } from './scheduleEditModal.component';
 import { ScheduleService } from './schedule.service';
 import { Schedule } from './schedule';
 
@@ -53,7 +54,7 @@ export class ScheduleListComponent implements OnInit {
         private toastrService: ToastrService,
         private scheduleService: ScheduleService,
         private logger: Logger,
-        @Inject('$modal') private $modal,
+        private ngbModal: NgbModal,
         @Inject('accountIdService') private accountIdService
     ) {}
 
@@ -75,25 +76,15 @@ export class ScheduleListComponent implements OnInit {
         var schedule = new Schedule();
         schedule.account_id = this.accountId;
 
-        var title = "New schedule";
+        const modal = this.ngbModal.open(ScheduleEditModalComponent, {
+          windowClass: 'in'
+        });
 
-        this.$modal({
-          templateUrl: scheduleFormTmpl,
-          controller: function($scope, title, schedule, $save) {
-            $scope.title = title;
-            $scope.operation = schedule;
-            $scope.$save = () => {
-              $scope.$hide();
-              $save($scope.operation);
-            };
-          },
-          locals: {
-            title: title,
-            schedule: schedule,
-            $save: (schedule) => {
-              this.save(schedule);
-            }
-          }
+        modal.componentInstance.schedule = schedule;
+
+        modal.result.then((schedule: Schedule) => {
+          this.save(schedule);
+        }, (reason) => function(reason) {
         });
     };