Diskussionsthread zur Schulung

[fmalcher]

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

[fmalcher]

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

[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>Preis: {{ 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]

Automatische Migration zu Signal Inputs: https://angular.dev/reference/migrations/signal-inputs

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

Womöglich hilfreich! 😇

[fmalcher]

Nx Library Types / Schichtenmodell: https://nx.dev/docs/concepts/decisions/project-dependency-rules

[fmalcher]

Verschachtelte Objekt klonen mit Spread-Syntax:

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

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

[fmalcher]

aus dem Meeting-Chat:

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

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

[fmalcher]

aria-controls: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-controls

[fmalcher]

TypeScript-first schema validation with static type inference: https://zod.dev

[fmalcher]

Reactive Context: https://angular.dev/guide/signals#reactive-contexts

[fmalcher]

Reactive Angular: Daten laden mit der Resource API: https://angular-buch.com/blog/2024-10-resource-api

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

[koempf]

falls sich jemand interessiert :-) https://angular.dev/guide/forms/signals/migration

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

OPTIONAL: Detailseite mit Resource

• WICHTIG: Verändere die bestehende Detailseite bitte NICHT, sondern lege eine neue Komponente für eine zweite Detailseite an!
• Lade die Daten auf der Detailseite mithilfe von httpResource().
• Empfange dazu den Routenparameter über ein Component Input Binding. Der Paramter liegt dann als Signal vor.
• Baue eine neue Methode getSingleResource() im Service BookStore. Sie empfängt als Parameter eine Funktion, die eine ISBN zurückgibt: getSingleResource(isbn: () => string): HttpResourceRef<Book | undefined>.
• Die Funktion wird als Parameter in der URL der HTTP-Resource verwendet.
• In der Komponente verwenden wir das Signal mit dem Routenparameter, um die ISBN-Funktion mit Werten zu füllen.

[fmalcher]

LÖSUNG für Detailseite mit Resource:
auf separatem Branch detailseite-resource bzw. Commit 0b94350

[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: null, undefined, 0, '' (leerer String), NaN

[fmalcher]

Subscriptions beenden / Code ausführen beim Beenden der Komponente:

• toSignal()
• AsyncPipe
• takeUntilDestroyed()
• DestroyRef
• ngOnDestroy()

[koempf]

das ist richtig gut: https://angular.schule/blog/2024-11-linked-signal

export function signalFromControl<T>(control: AbstractControl<T>) {
  const controlSignal = linkedSignal(
    toSignal(control.valueChanges, { initialValue: control.value })
  );
  effect(() => control.setValue(controlSignal()));
  return controlSignal;
}

[fmalcher]

RxJS in the real world: Building a car turn indicator:
https://angular.schule/blog/2021-12-rxjs-turn-signal

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

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

[fmalcher]

Can I Use? https://caniuse.com

[fmalcher]

XKCD: Dependency
https://xkcd.com/2347/

[fmalcher]

Typeahead-Suche

Implementiere eine Typeahead-Suche. Nutze als Basis dafür den Datenstrom 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
• 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