Add ng-bootstrap, implement task form modal window

src/app/task-list/task-list.component.html

@@ -1,8 +1,11 @@
+<button (click)=openTaskForm(null)>Neu</button>
+
 <ul>
     <li *ngFor="let task of tasks">
         <span>Titel: {{task.title}}</span>
         <br/>
         <span>Inhalt: {{task.content}}</span>
+        <button (click)="openTaskForm(task)">Bearbeiten</button>
         <button (click)="deleteTask(task)">Löschen</button>
     </li>
 </ul>

src/app/task-list/task-list.component.ts

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { BackendService, Task } from '../services/backend.service';
+import { TaskFormComponent } from '../task-form/task-form.component';
 
 @Component({
   selector: 'app-task-list',
@@ -10,7 +12,7 @@ export class TaskListComponent implements OnInit {
 
   public tasks: Task[] = [];
 
-  constructor(private backendService: BackendService) { 
+  constructor(private backendService: BackendService, private modalService: NgbModal) { 
       backendService.getTasks().subscribe(response => {
           if (response.status > 399) {
               alert('Fehler');
@@ -36,4 +38,12 @@ export class TaskListComponent implements OnInit {
     }    
   }
 
+  public openTaskForm(editTask: Task) {
+    const modalRef = this.modalService.open(TaskFormComponent, {
+      backdrop: 'static',
+      keyboard: true,
+    });
+    modalRef.componentInstance.task = editTask;
+  }
+
 }