Diskussionsthread zur Schulung

[fmalcher]

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

[fmalcher]

Template für BookComponent:

<div 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 }}">
    <div class="card-title">
      <h2>
        {{ book().title }}
        <span class="badge bg-secondary">{{ book().rating }}</span>
      </h2>
    </div>
    <p>{{ book().description }}</p>
   <p>{{ book().price }}</p>
  </div>
</div>

[fmalcher]

Aufgabe

• Zeige das aktuelle Datum in der Anwendung an, z. B. in der DashboardPage.
• Zusatz: Zeige auch die Uhrzeit an und aktualisiere die Zeit regelmäßig (z. B. 1x pro Sekunde)

[fmalcher]

Aufgabe

Zeige die Gesamtanzahl der Bücher in der Anwendung an (z. B. im Dashboard).

[fmalcher]

Aufgabe

Erstelle eine Komponente, die sich um die Anzeige der Bewertung kümmert (RatingDisplay).
Sie ist auch Teil des Features books.

Die Komponente RatingDisplay erhält das aktuelle Rating per Input und stellt es dar.
In der BookCard wird momentan das Rating direkt angezeigt – dieser Teil soll durch die neue Komponente ersetzt werden.

Zusatz: Zeige die Bewertung in der Komponente mit Sternen an. ⭐️⭐️⭐️⭐️⭐️

[fmalcher]

https://doesitmutate.xyz/

[fmalcher]

Vorarbeit für Formulare und Suche

Für das Buchformular und die Suche ist etwas Vorbereitung nötig: Wir brauchen neue Komponenten und Routen.

• Alle Komponenten sollen Teil des Books-Features sein, also im Ordner books liegen
• Formular: BookCreatePage, erreichbar unter der Route books/create
• Suche: BookSearchPage, erreichbar unter der Route books/search
• Navigationsleiste bauen, z. B. in der Komponente App (ganz einfach halten)
• Bitte noch kein Formular implementieren – das machen wir anschließend gemeinsam!

[fmalcher]

Bücher löschen

• Button auf der BookCard
• Event deleteBook hoch zum Dashboard werfen
• im Service BookStore: Methode deleteBook(isbn) bauen
• Der Typ unknown sagt aus, dass wir den Inhalt einer Variable nicht kennen und das auch nicht wollen.
• im Dashboard den Service benutzen
• nach erfolgreichem löschen: Liste aktualisieren
  • Option a) neu vom Server laden ⭐️
  • Option b) Liste lokal aktualisieren

[fmalcher]

Interaktive Marble-Diagramme: https://rxmarbles.com/

[fmalcher]

Aufgabe: 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!
Tipp: Native Propertys können auch mit Property Bindings beschrieben werden.

[fmalcher]

Aufgabe: Like-Liste / Warenkorb / Merkliste

• Button auf der BookCard
• BookCard ist eine "dumme" Komponente: Sie soll nicht mit Service sprechen, sondern das Dashboard soll das tun
• Liste zentral speichern, sodass sie Routenwechsel überlebt:
  • im Service BookStore ein Signal likedBooks ablegen
• Liste in einer eigenen Komponente anzeigen (nur Titel), die im Dashboard eingebunden wird
• Link zur Detailseite zu jedem favorisierten Buch
• Zusatz: Reset-Button

[fmalcher]

Typeahead-Suche

Implementiere eine Typeahead-Suche. Nutze als Basis dafür den Datenstrom valueChanges aus dem Formular, um während der Eingabe eine Suche zu starten.

• Suche mit HTTP zum Server schicken
• Ergebnisse in einfacher Liste darstellen (z. B. alle Titel in Bulletpoint-Liste)
• Signals verwenden
• Suchbegriff muss mindestens 3 Zeichen lang sein. Bitte löse das nicht mit einem Validator, sondern mit RxJS!
• nicht zu viele Anfragen kurz hintereinander zum Server schicken => Operator siehe Handout

[fmalcher]

Begriffe/Themen

Komponente
Direktive
Component.imports: Was wird da eingetragen?
Host-Element
Signal
Computed Signal
Effect
Service
Template String
Dependency Injection
Provider
map()
filter()
ngOnInit()
ngOnDestroy()
Pipe
Immutability
Spread-Operator
Interpolation
Property Binding
Event Binding
Input
Output
Observable
Observer
Subscription
Operator (RxJS)
Lazy Loading
Single-Page-Anwendung
Routing
Wildcard-Route
Router-Outlet
Routenparameter auslesen

[fmalcher]

Neu im Blog: Angular 20 ist da!

https://angular-buch.com/blog/2025-05-angular20