Verschönere Oberfläche mit Bootstrap

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

@@ -1,14 +1,16 @@
-<form>
-    <div class="form-group">
-        <label for="Title">Titel</label>
-        <input type="text" class="form-control" id="Title" required name="title" [(ngModel)]="title">
-    </div>
+<div class="modal-content p-3">
+    <form>
+        <div class="form-group">
+            <label for="Title">Titel</label>
+            <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 name="content" [(ngModel)]="content">
-    </div>
+        <div class="form-group">
+            <label for="Inhalt">Inhalt</label>
+            <input type="text" class="form-control" id="Content" required name="content" [(ngModel)]="content">
+        </div>
 
-    <button type="submit" class="btn btn-success">Submit</button>
+        <button type="submit" class="btn btn-success">Submit</button>
 
-</form>
+    </form>
+</div>

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

@@ -1,11 +1,12 @@
-<button (click)=openTaskForm(null)>Neu</button>
+<button class="btn btn-dark m-3" (click)="openTaskForm(null)">Neu</button>
 
-<ul>
-    <li *ngFor="let task of tasks">
+<ul class="list-group m-3">
+    <li *ngFor="let task of tasks" class="list-group-item">
         <span>Titel: {{task.title}}</span>
         <br/>
         <span>Inhalt: {{task.content}}</span>
-        <button (click)="openTaskForm(task)">Bearbeiten</button>
-        <button (click)="deleteTask(task)">Löschen</button>
+        <br>
+        <button class="btn btn-secondary m-2" (click)="openTaskForm(task)">Bearbeiten</button>
+        <button class="btn btn-secondary m-2" (click)="deleteTask(task)">Löschen</button>
     </li>
 </ul>