Show the unread-count badge
Angular · Angular · beginner · greenfield
Adds the standalone `UnreadBadgeComponent`: a computed label derives the badge text from the count input, the badge disappears entirely at zero and caps at `99+`, while a visually-hidden sibling carries the exact count with proper pluralization for screen readers. Checked 0, 1, 99, 100 and 250 by hand.
Requirements
- Add an unread badge to the inbox icon: it shows the unread count, which the parent supplies as a non-negative integer input.
- At 0 the badge is completely hidden (no empty pill).
- Above 99 the badge shows `99+`; exactly 99 still shows `99`.
- The exact count (with correct singular/plural wording) must be conveyed to assistive technology even when the visible text is capped.
- Use the app's theme tokens for the badge colors.
Files touched
- src/app/inbox/unread-badge.component.ts
--- src/app/inbox/unread-badge.component.ts
+import { Component, computed, input } from '@angular/core';
+
+@Component({
+ selector: 'app-unread-badge',
+ standalone: true,
+ template: `
+ @if (label(); as text) {
+ <span class="badge" aria-hidden="true">{{ text }}</span>
+ <span class="visually-hidden">{{ srLabel() }}</span>
+ }
+ `,
+ styles: `
+ .badge {
+ display: inline-block;
+ min-width: 1.25rem;
+ padding: 0 0.3rem;
+ border-radius: 0.75rem;
+ background: var(--danger-fg);
+ color: var(--bg-canvas);
+ font-size: 0.75rem;
+ text-align: center;
+ }
+ .visually-hidden {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ overflow: hidden;
+ clip-path: inset(50%);
+ white-space: nowrap;