Eine moderne Angular 20 Anwendung mit Posts- und Comments-Listen, performanter Virtual-Scrolling-Ansicht und Such-Highlighting.

Posts & Comments – Angular 20 Demo

Eine moderne Angular 20 App mit striktem TypeScript, Signals, eigenem Highlight-Pipe, wiederverwendbaren UI-Komponenten und performanter Virtual-Scrolling-Liste (Angular CDK) für große Datenmengen.

Build-/Serve-Konfiguration: Angular CLI Application Builder, SCSS, Production-Defaults mit Budgets.
Stack/Versions (Angular 20.1.x, RxJS 7.8, TS 5.8), Prettier-Override für HTML.
Strict TypeScript & Angular Compiler Options.

---

✨ Features

• Angular 20 (standalone components) mit Signals für lokalen State
• Virtual Scrolling via cdk-virtual-scroll-viewport für Comments (flüssig bei tausenden Einträgen)
• Such-Highlighting (eigene HighlightPipe mit sicheren innerHTML)
• Wiederverwendbare UI: InputComponent, Buttons
• Reactive Forms (Debounce-Suche)
• Saubere Services mit HttpClient, konfigurierbare API-Base-URL (src/config/appConfig.json)
• Strict TypeScript + strikte Angular-Template-Prüfungen
• Unit Tests mit Jasmine/Karma

---

🚀 Schnellstart

git clone https://github.com/payam2104/posts.git
cd posts
npm install
npm start

Läuft unter: http://localhost:4200/

---

⚙️ Konfiguration

API-Basis wird in src/config/appConfig.json gesetzt:

{
  "urlPrefix": "",
  "apiUri": "https://jsonplaceholder.typicode.com"
}

Die Services bauen Endpunkte daraus, z. B. https://jsonplaceholder.typicode.com/posts und .../comments.

---

🗂️ Projektstruktur (Auszug)

src/
 ├─ app/
 │   ├─ components/
 │   │   ├─ posts-list/           # Liste der Posts (+ Suche/Sortierung)
 │   │   └─ comments-list/        # Comments mit Virtual Scrolling
 │   │
 │   └─ core/
 │       ├─ models/               # Post, Comment Models
 │       ├─ pipes/highlight.pipe.ts
 │       ├─ services/
 │       │   ├─ post-service/
 │       │   └─ comment-service/
 │       └─ utils/url-constants.ts
 ├─ config/appConfig.json         # API-Base-URL
 ├─ main.ts
 └─ styles.scss

Builder/Assets/Styles sind in angular.json gepflegt (SCSS, public als Assets), inkl. Production-Budgets.

---

🧭 Routing

// src/app/app.routes.ts
[
  { path: '',            loadComponent: () => import('./components/posts-list/posts-list').then(c => c.PostsList) },
  { path: 'components',  loadComponent: () => import('./components/comments-list/comments-list').then(c => c.CommentsList) }
]

• / → PostsList
• /components → CommentsList (Virtual Scrolling)

---

🔍 Kernkomponenten

PostsList

• Lädt alle Posts (Service) und hält State in Signals
• Suche mit Highlighting: HighlightPipe umschließt Matches mit <span class="highlight">
• Sortierung per Klick auf Header (ID/Titel)
• Reactive Form + debounceTime für angenehme Eingabe

CommentsList (Virtual Scroll)

• cdk-virtual-scroll-viewport + `*cdkVirtualFor für performantes Rendering
• trackBy auf id reduziert Change Detection
• Dynamische itemSize + Resize-Handling für responsive Zeilenhöhe
• Paging/Append: Service stellt Methode zum Anhängen neuer Kommentare bereit (für spätere Infinite-Scroll-Erweiterung)

---

🧱 Services & Modelle

• PostService & CommentService nutzen HttpClient, endenden auf .../posts bzw. `.../comments; State via Signals
• Helper.ts baut die vollständige API-URL aus der Config
• Modelle in core/models kapseln API-Strukturen (z. B. Post, Comment)

---

🛠️ Entwicklungshinweise

• Strict Mode: Achte auf explizite Typen, keine impliziten Any-Casts, strikte Template-Typprüfung.
• Performance:
  • In CommentsList unbedingt trackBy beibehalten
  • cdkVirtualFor statt @for/*ngFor für große Listen
  • Teure Berechnungen in computed() kapseln; reaktive Ableitungen statt manueller Mutationen
• Security:
  • HighlightPipe verwendet DomSanitizer – nur auf bekannten Textquellen einsetzen

---

Autor

Payam Koushkbaghi