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.

• 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

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

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

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.

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.

// 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)

• 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

• 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)

• 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)

• 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

Payam Koushkbaghi