Diskussionsthread zur Schulung

[fmalcher]

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

[fmalcher]

Google TypeScript Style Guide: https://google.github.io/styleguide/tsguide.html
Angular Coding Style Guide: https://angular.dev/style-guide

[fmalcher]

HTML für BookComponent:

@let b = book();
<div class="card mb-4">
  <div class="card-body bg-light">
      <img class="img-thumbnail float-end" alt=""
        src="https://api.angular.schule/avatar/{{ b.rating }}">
    <div class="card-title">
      <h2>
        {{ b.title }}
        <span class="badge bg-secondary">{{ b.rating }}</span>
      </h2>
    </div>
    <p>{{ b.description }}</p>
    <p>Preis: {{ b.price }}</p>
  </div>
</div>

[pcarstensen]

Hat die deprecated Direktive *ngFor=" book in books" automatisch selbst ein Attribut oder book als track gesetzt oder wie hat dies funktioniert?

[fmalcher]

Ja, tatsächlich! Tracking war keine Pflichtangabe. Hat man es nicht angegeben, wurde das Element selbst verwendet. Das heißt: Diese beiden Varianten tun das gleiche:

*ngFor="let e of items"
@for (e of items; track e) {}

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

[K-Neu-Projects]

https://angular-19-4d78c8.gitlab.io/
=)

[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';

[pcarstensen]

Ich verstehe noch nicht ganz, warum wir an folgender Stelle (Dashboard-Komponente) $event in die Funktion geben und nicht die lokale Variable book.

<app-book [book]="book" (rateDown)="doRateDown($event)" (rateUp)="doRateUp($event)"/>

[fmalcher]

book würde auch funktionieren! $event und book enthalten dasselbe Objekt.
Ich würde aus der Book-Komponente im Event immer das Buch mitgeben, damit der Empfänger des Events selbst entscheiden kann. Da wir das Buch aber vorher immer per Property Binding an die Kindkomponente übergeben, liegt das Buch in der Elternkomponente definitiv vor.
Also: Ich denke, das ist reine Geschmackssache. 😇

[K-Neu-Projects]

Das gilt nur für dumb-Components oder?

Wenn book verwendet werden würde und die book.component bereits ein neues Book Object zurückgeben würde weil sich Werte verändert haben würde das verloren gehen?

[fmalcher]

Ja, wenn man so einen Verdacht hat, würde ich auf jeden Fall $event nehmen. Fühlt sich für mich insgesamt besser an: Wir nehmen das Buch, das die Komponente uns gegeben hat, und wir müssen nicht wissen, woher es kommt.

[pcarstensen]

alles klar :) Danke euch!

[fmalcher]

https://doesitmutate.xyz/

[fmalcher]

Resource API: https://angular-buch.com/blog/2024-10-resource-api

[fmalcher]

Freiwillige Hausaufgabe (2)

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.

[MarkusBohr2]

Der DashboardComponent-Konstruktor wird bei mir aktuell auch nach Rücksprung von der Details-Seite aufgerufen.
Das ist insofern unschön, weil dadurch die Bücher neu geladen werden und alle Ratings zurückgesetzt werden...

  constructor() {
    this.#bookStoreService.getAll().subscribe({
      next: books => {
        this.books.set(books)
        console.log('LOADED BOOKS FROM SERVICE')
      },
      error: error => console.error('ERROR', error.message())
    });
  }

[fmalcher]

Das ist tatsächlich auch korrekt und gewollt so 😊 Wenn man eine Route verlässt, wird die Komponente zerstört. Möchte man die Zustände behalten, muss man sie außerhalb der Komponente speichern, z. B. in einem Service.

[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: HomePageComponent in src/app
  • URL: /home
• Seite: "Buch erstellen"
  • Komponente BookCreateComponent in src/app/books
  • URL: /books/create
• Seite: "Suche"
  • Komponente BookSearchComponent 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 AppComponent zu sehen ist.
Sie enthält die Menüpunkte "Home" und "Books".

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

[fmalcher]

Freiwillige Hausaufgabe (3)

• 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: Mit DELETE /books kannst du die Buchliste auf dem Server zurücksetzen (entweder über die Swagger UI oder mit einem HTTP-Call direkt aus unserer Anwendung)
• Tipp: Der Typ unknown kann verwendet werden, wenn der Inhalt einer Variable unbekannt und uninteressant ist.

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

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

[fmalcher]

https://rxmarbles.com/

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

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. Mehr Informationen findest Du im Angular-Buch in Kapitel 15 (ab Seite 243). Bringe morgen deine Fragen mit! 🙂

[MarkusBohr2]

Die Folien sind noch nicht freigeschaltet, Ferdinand!

[fmalcher]

Die Folien sind jetzt da 🙂

[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
• Zusatz: einfachen Ladeindikator anzeigen

[fmalcher]

NgRx einrichten

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

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 offenen Aufgaben "Chat" und "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]

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

[fmalcher]

Neu im Blog: Angular 20 ist da!

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