Add ng-bootstrap, implement task form modal window

src/app/app.module.ts

@@ -1,5 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 
 import { AppRoutingModule } from './app-routing.module';
@@ -8,6 +9,7 @@ import { AppComponent } from './app.component';
 import { TaskListComponent } from './task-list/task-list.component';
 import { BackendService } from './services/backend.service';
 import { TaskFormComponent } from './task-form/task-form.component';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 @NgModule({
   declarations: [
@@ -18,7 +20,9 @@ import { TaskFormComponent } from './task-form/task-form.component';
   imports: [
     BrowserModule,
     AppRoutingModule,
-    HttpClientModule
+    HttpClientModule,
+    FormsModule,
+    NgbModule
   ],
   providers: [
     BackendService,

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

@@ -1,12 +1,12 @@
 <form>
     <div class="form-group">
         <label for="Title">Titel</label>
-        <input type="text" class="form-control" id="Title" required [(ngModel)]="title">
+        <input type="text" class="form-control" id="Title" required name="title" [(ngModel)]="title">
     </div>
 
     <div class="form-group">
         <label for="Inhalt">Inhalt</label>
-        <input type="text" class="form-control" id="Content" required [(ngModel)]="content">
+        <input type="text" class="form-control" id="Content" required name="content" [(ngModel)]="content">
     </div>
 
     <button type="submit" class="btn btn-success">Submit</button>

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

@@ -1,4 +1,5 @@
 import { Component, OnInit, Input } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { BackendService, Task } from '../services/backend.service';
 
 @Component({
@@ -15,7 +16,7 @@ export class TaskFormComponent implements OnInit {
     public task: Task;
     private submitted: boolean;
 
-    constructor(private backendService: BackendService) { }
+    constructor(private backendService: BackendService, private activeModalService: NgbActiveModal) { }
 
     ngOnInit(): void {
         if (this.task !== null && this.task !== undefined) {
@@ -35,5 +36,6 @@ export class TaskFormComponent implements OnInit {
             this.backendService.postTask(this.task);
         }
         this.submitted = true;
+        this.activeModalService.close();
     }
 }

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;
+  }
+
 }

src/polyfills.ts

@@ -1,3 +1,7 @@
+/***************************************************************************************************
+ * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
+ */
+import '@angular/localize/init';
 /**
  * This file includes polyfills needed by Angular and is loaded before the app.
  * You can add your own extra polyfills to this file.