Diskussionsthread zur Schulung

[fmalcher]

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

[fmalcher]

Signal Input Migration: https://angular.dev/reference/migrations/signal-inputs

ng generate @angular/core:signal-input-migration

[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]

Aus der Dokumentation zu track:

The value of the track expression determines a key used to associate array items with the views in the DOM. Having clear indication of the item identity allows Angular to execute a minimal set of DOM operations as items are added, removed or moved in a collection.

To optimize performance, especially in loops over immutable data, ensure the track expression is effectively used to identify each item uniquely. Because of the potential for poor performance, the track expression is required for the @for loops.

For collections that remain static, track $index provides a straightforward tracking mechanism. For dynamic collections experiencing additions, deletions, or reordering, opt for a unique property of each item as the tracking key.

[fmalcher]

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

[fmalcher]

Name event handlers for what they do, not for the triggering event.

[fmalcher]

Freiwillige Hausaufgabe (1)

• Zeige die Gesamtanzahl der Bücher an einer geeigneten Stelle in der Anwendung an.
• Entwickle eine Komponente, um die Bewertung eines Buchs anzuzeigen, z. B. <app-rating-display [value]="4" />. Im Template der Komponente kannst du als Zwischenschritt zunächst nur die Rating-Zahl anzeigen.
• Zeige die Bewertung in der neuen Komponente mit Sternen an. Du kannst entweder ein Bild, ein ASCII-Zeichen (*) oder ein Emoji (⭐️) verwenden.

Super optionale und freiwillige Zusatzaufgabe

Fasse die beiden Outputs rateUp und rateDown zu einem Output rate zusammen. Im Payload müssen das Buch und die Bewertungsrichtung (up/down) enthalten sein. Im Dashboard muss es eine Fallunterscheidung geben, die die richtige Methode aufruft.

[fmalcher]

Array-Operationen und Immutability: https://doesitmutate.xyz

[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]

Freiwillige Hausaufgabe (2)

Buttons deaktivieren

Deaktiviere die Buttons in der BookCard, wenn das Max/Min-Rating erreicht ist. Für diese Aufgabe gibt es verschieden komplexe Ausprägungen. Denke über die möglichen Varianten nach und entscheide dich für einen Lösungsweg. Berücksichtige, dass die BookCard eine reine Anzeigekomponente bleibt und möglichst nicht mit Services sprechen sollte.

[fmalcher]

Angular Can I Use: https://www.angular.courses/caniuse/features

[fmalcher]

Aufgabe: Bücher laden auf der Detailseite

• Erstelle im BookStore eine Methode getSingleResource(isbn: () => string). Die übergebene Funktion liefert eine ISBN.
• Die Methode erzeugt eine Resource, die das jeweilige Buch lädt.
• Erzeuge in der BookDetailsPage eine Instanz der Resource mithilfe der neuen Methode.
• Zeige das Buch in der Komponente an, z. B. Titel und Beschreibung
• Zusatz: Baue einen Ladeindikator (Tipp: Signal isLoading()).

[fmalcher]

Freiwillige Hausaufgabe (3)

Bücher löschen

• Ein Buch soll auf dem Server gelöscht werden können. Erstelle dafür einen Button in der BookCard.
• 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:

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

Wenn die Anwendung unter http://localhost:4200 aufgerufen wird, soll die neue Startseite zu sehen sein (nicht das Dashboard).

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]

Freiwillige Hausaufgabe (4)

Datum anzeigen

• Nutze die DatePipe, um das aktuelle Datum und Uhrzeit in der Anwendung anzuzeigen. Verwende als Anzeigeort bitte eine geroutete Komponente, z. B. das Dashboard.
• Aktualisiere die Zeit regelmäßig.
• Beende den laufenden Timer, wenn die Komponente beendet wird (z. B. beim Wegnavigieren).

[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]

Falsy Values:

• false
• null
• undefined
• 0
• '' (leerer String)
• NaN

[fmalcher]

Code ausführen/Dinge beenden beim Beenden der Komponente

• Lifecycle-Hook ngOnDestroy()
• DestroyRef.destroyed (imperativ)
• DestroyRef.onDestroy() (reaktiv)
• RxJS-Operator takeUntilDestroyed()
• AsyncPipe
• toSignal()
• rxResource()

[fmalcher]

Hausaufgabe (5)

Lies dir das Handout und die Folien zu RxJS in Ruhe durch (siehe Portalseite) und schau dir die vergangenen Übungen im Playground noch einmal an. Bringe morgen deine Fragen mit! 🙂

[fmalcher]

Barrierefreiheit in Formularen: Daten versenden
https://angular-buch.com/blog/2026-03-form-submit-a11y

[fmalcher]

RxJS Operator Decision Tree: https://rxjs.dev/operator-decision-tree

[fmalcher]

Typeahead-Suche

Implementiere eine Typeahead-Suche, die bereits während der Eingabe die Suchergebnisse anzeigt.

Schritt 1: Suchformular

Erstelle in der BookSearchPage ein einfaches Suchformular mit Signal Forms. Es besteht nur aus einem einzelnen Feld.
Das Signal für das Datenmodell enthält demnach nur einen einfachen string – kein komplexes Objekt mit mehreren Feldern.
Das Formular besitzt keine Absendelogik und keinen Submit-Button.

Schritt 2: Suchlogik

Die Suchlogik soll vollständig mit RxJS umgesetzt werden.
Verwende die Wertänderungen im Signal, um einen Datenstrom von Suchbegriffen zu erhalten.
Berücksichtige dann die folgenden Kriterien:

• Suchbegriff muss mindestens 3 Zeichen lang sein. Bitte löse das nicht mit einem Validator/Schema, sondern mit RxJS!
• nicht zu viele Anfragen kurz hintereinander zum Server schicken
• Es sollen niemals zwei gleiche Suchbegriffe direkt nacheinander zum Server geschickt werden.
• Suche mit HTTP zum Server schicken
• Ergebnisse in einfacher Liste darstellen (z. B. alle Titel in Bulletpoint-Liste)
• Signals verwenden

[fmalcher]

NgRx Signal Store: https://ngrx.io/guide/signals/signal-store

[fmalcher]

Angular 18 ist da (ausführlich zu Zoneless Change Detection):
https://angular-buch.com/blog/2024-06-angular18

[fmalcher]

Angular Update Guide: https://angular.dev/update-guide

[fmalcher]

Zusatzaufgaben

Like-Liste / Warenkorb / Merkliste

Lösung: d7d6716

• 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.

Login-Bereich

Lösung: 3b06f31

Schütze den Books-Bereich mit einem einfachen Login!

• Im neuen zentralen AuthService wird der Zustand (eingeloggt ja/nein) zentral in einem Signal gespeichert.
• In einem neuen Feature auth befindet sich eine Login-Seite.
• Das Passwort wird statisch im AuthService abgelegt. Der Service prüft das eingegebene Passwort und setzt seinen "eingeloggt"-Zustand. Achtung: Das solltest du für eine echte Anwendung niemals so umsetzen!
• Nach erfolgreichem Login wird umgeleitet zum Books-Bereich.
• Ein Logout-Button in der Komponente App loggt wieder aus und leitet zurück zur Home-Seite.
• Ein Guard schützt die Routen unter books vor unberechtigtem Zugriff. Nur wenn der Nutzer eingeloggt ist, darf der Bereich betreten werden. Andernfalls wird umgeleitet zur Login-Seite (Guard kann einen UrlTree zurückgeben).
• Zusatz: Nach dem Login wird die Seite angezeigt, die ursprünglich aufgerufen wurde. Bei der Umleitung zur Login-Seite musst du dafür die ursprüngliche URL zwischenspeichern, um sie später wieder abzurufen, z. B. in einem Query-Parameter.
• Zusatz: Sorge dafür, dass nur der AuthService den Zustand in seinem Signal verändern kann. Andere Teile der Anwendung dürfen den Zustand nur lesen. Tipp: WritableSignal bietet dafür eine Schnittstelle an.

RxJS: Drag and drop

Lösung: 1f4197d

letzte Übung im RxJS-Playground

RxJS: Intervall aus Array

Lösung: b910e99

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.