From df119dcc03f21b6b50fd913f3c4127eb44df22b5 Mon Sep 17 00:00:00 2001
From: marc-i <marc-alexander.iten@fhgr.ch>
Date: Thu, 14 May 2026 15:26:01 +0200
Subject: [PATCH] extract html & css

---
 src/app/app.component.css  | 181 ++++++++++++++++++++++
 src/app/app.component.html | 109 ++++++++++++++
 src/app/app.component.ts   | 300 +------------------------------------
 3 files changed, 293 insertions(+), 297 deletions(-)
 create mode 100644 src/app/app.component.css
 create mode 100644 src/app/app.component.html

diff --git a/src/app/app.component.css b/src/app/app.component.css
new file mode 100644
index 0000000..585d441
--- /dev/null
+++ b/src/app/app.component.css
@@ -0,0 +1,181 @@
+/* ── Layout ──────────────────────────────────────────── */
+.container {
+  max-width: 640px;
+  margin: 2rem auto;
+  padding: 0 1rem;
+  font-family: inherit; /* übernimmt Font aus styles.css */
+}
+
+/* ── Header ──────────────────────────────────────────── */
+.app-header {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+.app-header h1 {
+  font-size: 2rem;
+  margin: 0;
+}
+.subtitle {
+  color: #888;
+  font-size: 0.85rem;
+  margin: 0.25rem 0 0;
+}
+
+/* ── Fehlermeldung ───────────────────────────────────── */
+.error-box {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #fee2e2;
+  border: 1px solid #fca5a5;
+  color: #b91c1c;
+  padding: 0.75rem 1rem;
+  border-radius: 8px;
+  margin-bottom: 1rem;
+}
+.close-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #b91c1c;
+  font-size: 1rem;
+}
+
+/* ── Formular ────────────────────────────────────────── */
+.add-form {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+}
+.add-form input {
+  flex: 1;
+  padding: 0.6rem 0.8rem;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  font-size: 1rem;
+  outline: none;
+  transition: border-color 0.2s;
+}
+.add-form input:focus {
+  border-color: #2563eb;
+}
+.add-form button {
+  padding: 0.6rem 1.2rem;
+  background: #2563eb;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  font-size: 1rem;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 0.2s;
+}
+.add-form button:hover:not(:disabled) {
+  background: #1d4ed8;
+}
+.add-form button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+/* ── Ladeindikator ───────────────────────────────────── */
+.loading {
+  text-align: center;
+  color: #6b7280;
+  padding: 2rem;
+}
+
+/* ── ToDo-Liste ──────────────────────────────────────── */
+.todo-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.empty-state {
+  text-align: center;
+  color: #9ca3af;
+  padding: 2rem;
+}
+.todo-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  transition: background 0.15s;
+}
+.todo-item:hover {
+  background: #f9fafb;
+}
+
+/* Abgehaktes ToDo: Text wird durchgestrichen und ausgegraut */
+.todo-item.completed .todo-title {
+  text-decoration: line-through;
+  color: #9ca3af;
+}
+
+.todo-item input[type="checkbox"] {
+  width: 1.1rem;
+  height: 1.1rem;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.todo-title {
+  flex: 1;
+  cursor: pointer;
+}
+.user-badge {
+  font-size: 0.7rem;
+  color: #6b7280;
+  background: #f3f4f6;
+  border-radius: 99px;
+  padding: 0.15rem 0.5rem;
+  white-space: nowrap;
+}
+.delete-btn {
+  background: none;
+  border: none;
+  color: #d1d5db;
+  font-size: 1rem;
+  cursor: pointer;
+  padding: 0.25rem;
+  line-height: 1;
+  border-radius: 4px;
+  transition: color 0.15s;
+}
+.delete-btn:hover {
+  color: #ef4444;
+}
+
+/* ── Pagination ──────────────────────────────────────── */
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  margin-top: 1.5rem;
+}
+.pagination button {
+  padding: 0.5rem 1rem;
+  border: 1px solid #d1d5db;
+  background: #fff;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.pagination button:hover:not(:disabled) {
+  background: #f3f4f6;
+}
+.pagination button:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+.page-info {
+  color: #6b7280;
+  font-size: 0.9rem;
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
new file mode 100644
index 0000000..2f530b8
--- /dev/null
+++ b/src/app/app.component.html
@@ -0,0 +1,109 @@
+<div class="container">
+
+  <header class="app-header">
+    <h1>ToDo-App</h1>
+    <p class="subtitle">Angular 21 · Vite · REST-API</p>
+  </header>
+
+  <!-- ======================================================
+       FEHLERMELDUNG
+       *ngIf zeigt das Element nur an, wenn "error" einen Wert hat.
+       ====================================================== -->
+  <div class="error-box" *ngIf="error">
+    <strong>Fehler:</strong> {{ error }}
+    <button class="close-btn" (click)="error = ''">✕</button>
+  </div>
+
+  <!-- ======================================================
+       FORMULAR – Neues ToDo hinzufügen
+       (ngSubmit): Ruft addTodo() beim Absenden auf.
+       [(ngModel)]: Two-Way-Binding – verbindet Input mit "newTitle".
+       [disabled]: Deaktiviert Button, wenn Feld leer ist.
+       ====================================================== -->
+  <form class="add-form" (ngSubmit)="addTodo()">
+    <input
+      type="text"
+      [(ngModel)]="newTitle"
+      name="newTitle"
+      placeholder="Neues ToDo eingeben..."
+      autocomplete="off"
+    />
+    <button type="submit" [disabled]="!newTitle.trim() || saving">
+      {{ saving ? 'Speichert…' : '+ Hinzufügen' }}
+    </button>
+  </form>
+
+  <!-- ======================================================
+       LADEINDIKATOR
+       Wird angezeigt, während Daten von der API geladen werden.
+       ====================================================== -->
+  <div class="loading" *ngIf="loading">Daten werden geladen…</div>
+
+  <!-- ======================================================
+       TODO-LISTE
+       *ngFor iteriert über das todos-Array und rendert ein <li> pro Eintrag.
+       "let todo of todos" → todo ist die aktuelle Variable im Loop.
+       [class.completed]: Fügt CSS-Klasse hinzu, wenn todo.completed === true.
+       ====================================================== -->
+  <ul class="todo-list" *ngIf="!loading">
+
+    <!-- Meldung, wenn keine Todos vorhanden -->
+    <li class="empty-state" *ngIf="todos.length === 0">
+      Keine ToDos auf dieser Seite.
+    </li>
+
+    <li
+      *ngFor="let todo of todos"
+      class="todo-item"
+      [class.completed]="todo.completed"
+    >
+      <!-- Checkbox: (change) reagiert auf Änderung und ruft toggleTodo() auf -->
+      <input
+        type="checkbox"
+        [checked]="todo.completed"
+        (change)="toggleTodo(todo)"
+        [id]="'todo-' + todo.id"
+      />
+
+      <!-- Label verknüpft Text mit der Checkbox über das id-Attribut -->
+      <label [for]="'todo-' + todo.id" class="todo-title">
+        {{ todo.title }}
+      </label>
+
+      <!-- Badge zeigt die User-ID an -->
+      <span class="user-badge">User {{ todo.userId }}</span>
+
+      <!-- Löschen-Button: (click) ruft deleteTodo() mit der ID auf -->
+      <button
+        class="delete-btn"
+        (click)="deleteTodo(todo.id)"
+        title="ToDo löschen"
+      >
+        ✕
+      </button>
+    </li>
+  </ul>
+
+  <!-- ======================================================
+       PAGINATION
+       [disabled]: Deaktiviert Buttons an den Rändern der Liste.
+       ====================================================== -->
+  <div class="pagination" *ngIf="!loading">
+    <button
+      (click)="prevPage()"
+      [disabled]="currentPage === 1"
+    >
+      ← Zurück
+    </button>
+
+    <span class="page-info">Seite {{ currentPage }}</span>
+
+    <button
+      (click)="nextPage()"
+      [disabled]="todos.length < pageSize"
+    >
+      Weiter →
+    </button>
+  </div>
+
+</div>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 5942537..07b5cf8 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -25,303 +25,9 @@ import { Todo } from './todo.model';
   // imports: Andere Angular-Module/Komponenten, die im Template verwendet werden
   imports: [CommonModule, FormsModule],
 
-  // template: Das HTML-Template der Komponente (inline, kein separates File)
-  template: `
-    <div class="container">
-
-      <header class="app-header">
-        <h1>ToDo-App</h1>
-        <p class="subtitle">Angular 21 · Vite · REST-API</p>
-      </header>
-
-      <!-- ======================================================
-           FEHLERMELDUNG
-           *ngIf zeigt das Element nur an, wenn "error" einen Wert hat.
-           ====================================================== -->
-      <div class="error-box" *ngIf="error">
-        <strong>Fehler:</strong> {{ error }}
-        <button class="close-btn" (click)="error = ''">✕</button>
-      </div>
-
-      <!-- ======================================================
-           FORMULAR – Neues ToDo hinzufügen
-           (ngSubmit): Ruft addTodo() beim Absenden auf.
-           [(ngModel)]: Two-Way-Binding – verbindet Input mit "newTitle".
-           [disabled]: Deaktiviert Button, wenn Feld leer ist.
-           ====================================================== -->
-      <form class="add-form" (ngSubmit)="addTodo()">
-        <input
-          type="text"
-          [(ngModel)]="newTitle"
-          name="newTitle"
-          placeholder="Neues ToDo eingeben..."
-          autocomplete="off"
-        />
-        <button type="submit" [disabled]="!newTitle.trim() || saving">
-          {{ saving ? 'Speichert…' : '+ Hinzufügen' }}
-        </button>
-      </form>
-
-      <!-- ======================================================
-           LADEINDIKATOR
-           Wird angezeigt, während Daten von der API geladen werden.
-           ====================================================== -->
-      <div class="loading" *ngIf="loading">Daten werden geladen…</div>
-
-      <!-- ======================================================
-           TODO-LISTE
-           *ngFor iteriert über das todos-Array und rendert ein <li> pro Eintrag.
-           "let todo of todos" → todo ist die aktuelle Variable im Loop.
-           [class.completed]: Fügt CSS-Klasse hinzu, wenn todo.completed === true.
-           ====================================================== -->
-      <ul class="todo-list" *ngIf="!loading">
-
-        <!-- Meldung, wenn keine Todos vorhanden -->
-        <li class="empty-state" *ngIf="todos.length === 0">
-          Keine ToDos auf dieser Seite.
-        </li>
-
-        <li
-          *ngFor="let todo of todos"
-          class="todo-item"
-          [class.completed]="todo.completed"
-        >
-          <!-- Checkbox: (change) reagiert auf Änderung und ruft toggleTodo() auf -->
-          <input
-            type="checkbox"
-            [checked]="todo.completed"
-            (change)="toggleTodo(todo)"
-            [id]="'todo-' + todo.id"
-          />
-
-          <!-- Label verknüpft Text mit der Checkbox über das id-Attribut -->
-          <label [for]="'todo-' + todo.id" class="todo-title">
-            {{ todo.title }}
-          </label>
-
-          <!-- Badge zeigt die User-ID an -->
-          <span class="user-badge">User {{ todo.userId }}</span>
-
-          <!-- Löschen-Button: (click) ruft deleteTodo() mit der ID auf -->
-          <button
-            class="delete-btn"
-            (click)="deleteTodo(todo.id)"
-            title="ToDo löschen"
-          >
-            ✕
-          </button>
-        </li>
-      </ul>
-
-      <!-- ======================================================
-           PAGINATION
-           [disabled]: Deaktiviert Buttons an den Rändern der Liste.
-           ====================================================== -->
-      <div class="pagination" *ngIf="!loading">
-        <button
-          (click)="prevPage()"
-          [disabled]="currentPage === 1"
-        >
-          ← Zurück
-        </button>
-
-        <span class="page-info">Seite {{ currentPage }}</span>
-
-        <button
-          (click)="nextPage()"
-          [disabled]="todos.length < pageSize"
-        >
-          Weiter →
-        </button>
-      </div>
-
-    </div>
-  `,
-
-  // styles: Komponenten-spezifisches CSS (ist automatisch auf diese Komponente begrenzt)
-  styles: [`
-    /* ── Layout ──────────────────────────────────────────── */
-    .container {
-      max-width: 640px;
-      margin: 2rem auto;
-      padding: 0 1rem;
-      font-family: inherit; /* übernimmt Font aus styles.css */
-    }
-
-    /* ── Header ──────────────────────────────────────────── */
-    .app-header {
-      text-align: center;
-      margin-bottom: 2rem;
-    }
-    .app-header h1 {
-      font-size: 2rem;
-      margin: 0;
-    }
-    .subtitle {
-      color: #888;
-      font-size: 0.85rem;
-      margin: 0.25rem 0 0;
-    }
-
-    /* ── Fehlermeldung ───────────────────────────────────── */
-    .error-box {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      background: #fee2e2;
-      border: 1px solid #fca5a5;
-      color: #b91c1c;
-      padding: 0.75rem 1rem;
-      border-radius: 8px;
-      margin-bottom: 1rem;
-    }
-    .close-btn {
-      background: none;
-      border: none;
-      cursor: pointer;
-      color: #b91c1c;
-      font-size: 1rem;
-    }
-
-    /* ── Formular ────────────────────────────────────────── */
-    .add-form {
-      display: flex;
-      gap: 0.5rem;
-      margin-bottom: 1.5rem;
-    }
-    .add-form input {
-      flex: 1;
-      padding: 0.6rem 0.8rem;
-      border: 1px solid #d1d5db;
-      border-radius: 8px;
-      font-size: 1rem;
-      outline: none;
-      transition: border-color 0.2s;
-    }
-    .add-form input:focus {
-      border-color: #2563eb;
-    }
-    .add-form button {
-      padding: 0.6rem 1.2rem;
-      background: #2563eb;
-      color: #fff;
-      border: none;
-      border-radius: 8px;
-      font-size: 1rem;
-      cursor: pointer;
-      white-space: nowrap;
-      transition: background 0.2s;
-    }
-    .add-form button:hover:not(:disabled) {
-      background: #1d4ed8;
-    }
-    .add-form button:disabled {
-      opacity: 0.5;
-      cursor: default;
-    }
-
-    /* ── Ladeindikator ───────────────────────────────────── */
-    .loading {
-      text-align: center;
-      color: #6b7280;
-      padding: 2rem;
-    }
-
-    /* ── ToDo-Liste ──────────────────────────────────────── */
-    .todo-list {
-      list-style: none;
-      margin: 0;
-      padding: 0;
-      display: flex;
-      flex-direction: column;
-      gap: 0.5rem;
-    }
-    .empty-state {
-      text-align: center;
-      color: #9ca3af;
-      padding: 2rem;
-    }
-    .todo-item {
-      display: flex;
-      align-items: center;
-      gap: 0.75rem;
-      padding: 0.75rem 1rem;
-      background: #fff;
-      border: 1px solid #e5e7eb;
-      border-radius: 8px;
-      transition: background 0.15s;
-    }
-    .todo-item:hover {
-      background: #f9fafb;
-    }
-
-    /* Abgehaktes ToDo: Text wird durchgestrichen und ausgegraut */
-    .todo-item.completed .todo-title {
-      text-decoration: line-through;
-      color: #9ca3af;
-    }
-
-    .todo-item input[type="checkbox"] {
-      width: 1.1rem;
-      height: 1.1rem;
-      cursor: pointer;
-      flex-shrink: 0;
-    }
-    .todo-title {
-      flex: 1;
-      cursor: pointer;
-    }
-    .user-badge {
-      font-size: 0.7rem;
-      color: #6b7280;
-      background: #f3f4f6;
-      border-radius: 99px;
-      padding: 0.15rem 0.5rem;
-      white-space: nowrap;
-    }
-    .delete-btn {
-      background: none;
-      border: none;
-      color: #d1d5db;
-      font-size: 1rem;
-      cursor: pointer;
-      padding: 0.25rem;
-      line-height: 1;
-      border-radius: 4px;
-      transition: color 0.15s;
-    }
-    .delete-btn:hover {
-      color: #ef4444;
-    }
-
-    /* ── Pagination ──────────────────────────────────────── */
-    .pagination {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      gap: 1rem;
-      margin-top: 1.5rem;
-    }
-    .pagination button {
-      padding: 0.5rem 1rem;
-      border: 1px solid #d1d5db;
-      background: #fff;
-      border-radius: 8px;
-      cursor: pointer;
-      transition: background 0.15s;
-    }
-    .pagination button:hover:not(:disabled) {
-      background: #f3f4f6;
-    }
-    .pagination button:disabled {
-      opacity: 0.4;
-      cursor: default;
-    }
-    .page-info {
-      color: #6b7280;
-      font-size: 0.9rem;
-    }
-  `],
+  // Template und Styles sind ausgelagert für bessere Wartbarkeit
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.css',
 })
 export class AppComponent implements OnInit {