Render user comments under the article
Angular · Angular · advanced · greenfield
Adds the comment thread component for article pages. Bodies come straight from the public API as user-entered text and are rendered through interpolation. Covers the empty thread, keeps the API's ordering, and wires the datetime attribute for the formatting pass that comes next.
Comments are public and unmoderated at post time, so hostile input in the body field is expected traffic, not a corner case.
Requirements
- Render the article's comment thread: author, timestamp, and the comment body, newest first as provided by the API (already ordered — do not re-sort).
- Comment bodies are raw user-generated text and may contain anything, including HTML tags and script fragments; they must render as inert text, never as markup (XSS-safe).
- Timestamps are ISO strings; show them as-is inside a <time> element with a machine-readable datetime attribute (pretty formatting is a separate ticket).
- An empty thread shows a 'No comments yet.' message.
Files touched
- src/app/articles/comment-list.component.ts
--- src/app/articles/comment-list.component.ts
+import { Component, input } from '@angular/core';
+
+export interface ArticleComment {
+ id: string;
+ author: string;
+ body: string;
+ postedAt: string; // ISO timestamp
+}
+
+@Component({
+ selector: 'app-comment-list',
+ standalone: true,
+ template: `
+ <ul class="comments">
+ @for (comment of comments(); track comment.id) {
+ <li>
+ <header>
+ <strong>{{ comment.author }}</strong>
+ <time [attr.datetime]="comment.postedAt">{{ comment.postedAt }}</time>
+ </header>
+ <p>{{ comment.body }}</p>
+ </li>
+ } @empty {
+ <li class="empty">No comments yet.</li>
+ }
+ </ul>
+ `,
+})
+export class CommentListComponent {