Diskussionsthread zur Schulung

[fmalcher]

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

[fmalcher]

HTML für Komponente 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>Preis: {{ book().price }}</p>
  </div>
</div>

[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 soll zunächst nur die Rating-Zahl angezeigt werden.
• Zeige die Bewertung in der neuen Komponente mit Sternen an. Du kannst entweder ein Bild, ein ASCII-Zeichen (*) oder ein Emoji (⭐️) verwenden.

[fmalcher]

Verschachtelte Objekte klonen mit Spread Operator:

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


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

// echte Deep Copy
const myCopy2 = structuredClone(myObj);
myCopy2.author.firstname = 'L';

[fmalcher]

https://doesitmutate.xyz/

[fmalcher]

Freiwillige Hausaufgabe (2)

Test Dashboard

Repariere den Test für die DashboardComponent – dort gibt es einen Fehler, seit wir den BookStoreService verwenden.

Bücher löschen

• Ein Buch soll auf dem Server gelöscht werden können. Erstelle dafür einen Button in der BookComponent.
• 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: 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. direkt über die Swagger UI.
• Extra: Baue eine Button in der Awendung, um die Buchliste zu resetten.

Resource API

Lies dir den Blogpost zur neuen Resource API in Ruhe durch: https://angular-buch.com/blog/2024-10-resource-api

Ergänzung: httpResource:

• https://angular.dev/api/common/http/httpResource
• https://blog.ninja-squad.com/2025/02/20/angular-http-resource/

[fmalcher]

Vorarbeit für Formulare und Suche

Für die nächsten Übungen ist etwas Vorarbeit nötig. Wir benötigen neue Routen und Komponenten.

• Alle Komponenten sollen Teil des Books-Features sein!
• Formularkomponente: BookCreateComponent, Route books/create
• Suchkomponente: BookSearchComponent, Route books/search
• Navigationsleiste z. B. in der AppComponent bauen (ganz einfach halten)
• Highlighte den aktiven Punkt in der Navigation.
• Bitte noch kein Formular implementieren – das machen wir anschließend gemeinsam!

[fmalcher]

Freiwillige Hausaufgabe (3)

Buttons deaktivieren

Deaktiviere die Buttons in der BookComponent, 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 BookComponent eine reine Anzeigekomponente bleibt und möglichst nicht mit Services sprechen sollte.

Verhalten RouterLinkActive

Der Punkt "Dashboard" in der Navigation ist immer aktiv, auch wenn eine andere Seite geladen ist.
Finde heraus warum, und wie sich das ändern lässt.

[fmalcher]

Falsy Values:
false, null, undefined, 0, '' (Leerstring), NaN

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

Freiwillige Hausaufgabe (4)

• 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).
• Du kannst die Aufgabe mit RxJS lösen, musst es aber nicht! 😉

[fmalcher]

Zusatzaufgaben

• Validator für ISBN
• Validator für Autoren-Array
• Autoren anzeigen
• Autorenfelder: Minus-Buttons
• Autorenfelder: Insert-Button

[fmalcher]

https://rxmarbles.com/

[fmalcher]

Hausaufgabe (5)

Lies dir das Handout zu RxJS in Ruhe durch (siehe Portalseite) und schau dir die vergangenen Übungen im Playground noch einmal an. Mehr Informationen findest Du im Angular-Buch in Kapitel 15 (ab Seite 243). Bringe morgen deine Fragen mit! 🙂

[fmalcher]

Neu in Angular 19: LinkedSignal für reaktive Zustandsverwaltung
https://angular-buch.com/blog/2024-11-linked-signal

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

• 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
• Suche mit HTTP zum Server schicken
• Ergebnisse in einfacher Liste darstellen (z. B. alle Titel in Bulletpoint-Liste)
• Signals verwenden

[fmalcher]

NgRx einrichten (20.0.0-beta)

ng add @ngrx/store@next
ng add @ngrx/store-devtools@next
ng add @ngrx/effects@next
ng add @ngrx/schematics@next

ng g feature books/store/book --api --entity=false --defaults

Redux DevTools (Browser-Extension):
https://chromewebstore.google.com/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=de
https://addons.mozilla.org/de/firefox/addon/reduxdevtools/

[fmalcher]

Zusatzaufgaben

RxJS Playground

Hier gibt es noch die offene Aufgabe "Dragdrop". Die Lösung für das Dragdrop findet ihr im Repo.

Refactoring des bestehenden Formulars

Teile das Formular zum Erstellen von Büchern in zwei Komponenten auf. Das reine Formular soll in einer eigenen neuen Komponente liegen, z. B. BookFormComponent. Die BookCreateComponent soll das Formular als Kindkomponente einbinden. Das Formular soll beim Abschicken das erzeugte Buch per Event Binding an die Elternkomponente übergeben. Die Formularkomponente ist dann also vollständig entkoppelt von der konkreten Verwendung.

Bücher bearbeiten

• Implementiere die Funktionalität zum Bearbeiten von Büchern.
• Lege dazu eine passende Komponente an (z. B. BookEditComponent), erstelle eine Route und Links zur neuen Seite.
• Die BookFormComponent soll wiederverwendet werden, sodass das Formular nicht zweimal implementiert wird.
• Der Abruf des zu bearbeitenden Buchs soll natürlich in der oberen BookEditComponent passieren. Das Buch wird über ein Property Binding an das Formular übergeben. Nutze hier am besten die Funktion toSignal() oder die AsyncPipe.
• Tipp: Mit einem effect() können wir darauf reagieren, dass ein Signal seinen Wert ändert.
• Tipp: Mit setValue()/patchValue() kann man den Formularwert überschreiben, siehe dazu auch die Folien.
• Zusatz: Die ISBN darf nicht geändert werden. Beim Bearbeiten ist das Feld also deaktiviert.
• Zum Aktualisieren des Buchs auf dem Server erweitere den BookStoreService. In der API-Doku findest du den passenden Endpunkt dafür: https://api.angular.schule/swagger-ui/
• Nach Bearbeiten eines Buchs soll wieder die Detailseite sichtbar sein.

[fmalcher]

Neu im Blog: Angular 20 ist da!

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