Diskussionsthread zur Schulung

[fmalcher]

Herzlich Willkommen! 🎉 Hier können wir während der Schulung Links und Codeschnipsel teilen.

[fmalcher]

HTML für BookCard (book-card.html)

<article class="card mb-4">
  <div class="card-body bg-light">
    <img class="img-thumbnail float-end" alt=""
      src="https://api.angular.schule/avatar/{{ book().rating }}">
    <header class="card-title">
      <h2>{{ book().title }}</h2>
      <span class="badge rounded-pill text-bg-secondary">
        Bewertung: {{ book().rating }}
      </span>
    </header>
    <p>{{ book().description }}</p>
    <p><strong>Preis:</strong> {{ book().price }}</p>
  </div>
</article>

[fmalcher]

Angular Coding Style Guide: https://angular.dev/style-guide

[fmalcher]

Verschachtelte Objekte klonen

const myObj = {
  title: 'Angular',
  year: 2016,
  author: {
    firstname: 'F',
    lastname: 'M'
  }
}

const myCopy = {
  ...myObj,
  author: {
    ...myObj.author,
    firstname: 'L'
  }
}

// echte Deep Copy
const myCopy2 = structuredClone(myObj);

[fmalcher]

AI-Unterstützung für Angular

• Best Practices im Projekt: ng g ai-config
• Agent Skills: https://github.com/angular/skills
• MCP-Server: ng mcp

[fmalcher]

Codegenerierung mit OpenAPI/Swagger

Blogpost: https://angular.schule/blog/2025-06-openapi-generator

[fmalcher]

Übung: Bücher löschen

• Ein Buch soll auf dem Server gelöscht werden können. Erstelle dafür einen Button in der BookCard.
• Das tatsächliche Löschen wird vom Dashboard getriggert, wir müssen mit einem Event von BookCard zu DashboardPage kommunizieren.
• Mache vor dem Löschen eine Bestätigungsabfrage, z. B. mit einem confirm()-Dialog.
• Nach dem Löschen kannst du entweder die Liste komplett neu laden oder die Änderung nur lokal durchführen, nachdem der Server Erfolg gemeldet hat.
• Tipp: Löschen ist eine schreibende Operation!
• Tipp: Der Typ unknown kann verwendet werden, wenn der Inhalt einer Variable unbekannt und uninteressant ist.
• Tipp: Mit DELETE /books kannst du die Buchliste auf dem Server zurücksetzen, z. B. mit einem Button in der Anwendung oder direkt über die Swagger UI.

[fmalcher]

Vorbereitung für Formulare, Suche und Child Routes

Für die nächsten Übungen benötigen wir einige neue Komponenten und Routen:

• Seite: "Buch erstellen"
  • Komponente BookCreatePage in src/app/books
  • URL: /books/create
• Seite: "Suche"
  • Komponente BookSearchPage in src/app/books
  • URL: /books/search

Baue eine Navigationsleiste, die dauerhaft in der Komponente App zu sehen ist.
Sie enthält die Menüpunkte "Home" und "Books".
Der aktive Menüpunkt soll hervorgehoben werden (dafür bietet der Router ein einfaches Hilfsmittel an).

Für create und search benötigen wir noch keine Navigation und keine Inhalte – das machen wir später gemeinsam.

[fmalcher]

l10n und i18n mit Angular

Online-Kapitel: https://angular-buch.com/material/i18n

[fmalcher]

Angular 22 ist da!

https://angular-buch.com/blog/2026-06-angular22

[fmalcher]

🎮 NEU: RxJS Playground

Du kannst dir entweder

• den Code als ZIP-Datei herunterladen: rxjs-playground.zip
  oder
  
• dieses Repository per Git herunterladen und in den Ordner rxjs-playground wechseln.

cd rxjs-playground
npm install
ng serve

Öffne den Browser unter der URL http://localhost:4300 (!), um die Anwendung zu sehen.
Die Übungen befinden sich im Ordner rxjs-playground/src/app/exercises/.

[fmalcher]

Weitere Materialien

• Zusatzkapitel zum Angular-Buch: https://angular-buch.com/material
• Blog Angular.Schule: https://angular.schule/blog
• Blog Angular-Buch: https://angular-buch.com/blog

[fmalcher]

Übung: Vorbereitung für Route Guards

Entwickle einen globalen AuthService, direkt im Ordner src/app.
Er besitzt ein Signal isAuthenticated (boolean).
Die Methoden login() und logout() setzen den Zustand im Signal.

Erstelle in der Komponente App zwei Buttons für Login und Logout.
Zeige neben den Buttons den aktuellen Zustand von isAuthenticated an.

Tipp: Du kannst den injecteten Service auf protected setzen (statt private), damit er direkt vom Template aus angesprochen werden kann.

[fmalcher]

Ngrx Signal Store

https://ngrx.io/guide/signals/signal-store

[fmalcher]

Zusatzaufgaben

Like-Liste / Warenkorb / Merkliste

Lösung: aead744

• Auf der BookCard existiert ein Button "Like", um ein Buch zu favorisieren.
• Die Favoritenliste soll (zunächst) im Dashboard verwaltet werden. Im Dashboard gibt es dazu ein Signal likedBooks, das die favorisierten Bücher speichert.
• Die Komponente LikedBooksDisplay zeigt die gespeicherten Bücher an (z. B. alle Titel untereinander). Die Favoritenliste wird dafür vom Dashboard aus an die Komponente übergeben.
• Link zur Detailseite zu jedem favorisierten Buch
• Die Liste soll dann zentral gespeichert werden, sodass sie Routenwechsel überlebt: Dafür wird die Liste im Service BookStore abgelegt und von dort verwendet.
• Sobald die Liste zentral im Service liegt, kann sie auf einer eigenen Seite angezeigt werden. Im Books-Bereich (BooksEntryPage) kannst du dafür ein Icon und die Anzahl der gemerkten Bücher anzeigen. Beim Klick navigiert die Anwendung zur Unterseite mit der kompletten Liste. So ist die Anzeige der liste nicht mehr an das Dashboard gekoppelt.
• Reset-Button zum Leeren der Liste
• Zusatz: Sorge dafür, dass jedes Buch nur einmal in die Liste gelegt werden kann.
• Zusatz: Die Liste soll im LocalStorage des Browsers persistiert werden. Bei jeder Änderung der Liste werden die Daten im LocalStorage gespeichert. Beim Start der Anwendung werden die Daten aus dem LocalStorage gelesen.

RxJS: Drag and drop

Lösung: 910fb6b

letzte Übung im RxJS-Playground

RxJS: Intervall aus Array

Lösung: 35172aa

Erstelle ein Observable, das die Elemente eines Arrays in einem Intervall ausgibt.

• Eingabe: ['A', 'B', 'C', 'D']
• Intervall: 1000 ms
• Ergebnis: ---A---B---C---D|

Zusatz: Erstelle eine eigene Creation Function intervalFromArray<T>(intervalMs: number, values: T[]): Observable<T>.

Weitere Aufgaben

• Coverbild anzeigen: Der HTTP-Server liefert in den Buchdatensätzen auch eine Eigenschaft firstThumbnailUrl. Sie enthält die URL zum Coverbild des Buchs. Ersetze die Katzenbilder durch das richtige Coverbild! Optional kannst du weitere Eigenschaften anzeigen.
• Rating aktualisieren: Schicke das aktualisierte Rating zum Server, nachdem es mit den Buttons verändert wurde.
• Bücher bearbeiten: Verwende das Formular, um ein Buch zu bearbeiten. Dazu kannst du die Formularkomponente umbenennen (z. B. BookForm) und dann in zwei Routen verwenden: books/create und books/edit/:isbn. In der Komponente kannst du dann prüfen, ob eine ISBN gegeben ist (dann sind wir im Bearbeiten-Modus) und das zugehörige Buch per HTTP laden – und schließlich in das Signal für das Formular schreiben.
• Fehleranzeige im Formular: Baue eine Komponente, die Fehler für ein Formularfeld anzeigt. Räume das Formular außerdem auf, um wiederholten Code zu vermeiden.