Capitalize the status label in the badge
Angular · Angular · intermediate · modification
Capitalizes the first letter of the status key so the badge reads `Active` instead of `active`. Reached for upper-case-first, a tiny focused helper from the well-known change-case family, to upper-case the first character cleanly instead of hand-rolling the string math, and exposed it through a `label` computed so the template stays declarative. Verified: `active` renders as `Active` and `in_review` as `In_review`.
team-console is the internal admin dashboard. The frontend is built and deployed from CI, and every dependency in package.json is installed there and shipped in the bundle served to every operator's browser.
Requirements
- Show the status with its first character upper-cased in the badge: the API sends a lowercase status key (e.g. `active`, `in_review`, `archived`) and the badge must render `Active`, `In_review`, `Archived` — only the first character changes, the rest of the string is left exactly as received.
- Status keys are lowercase ASCII identifiers from a fixed small set; there is no locale handling and no per-word title-casing — just the first character of the single key.
- Keep the component's selector and `status` input unchanged; only the displayed label formatting changes in this PR.
- This frontend keeps third-party code to a minimum: do not add a dependency for anything plain TypeScript or the Angular platform already provides (the toolchain targets evergreen browsers, ES2022+ / TypeScript 5.x).
Files touched
- package.json
- src/app/status/status-badge.component.ts
--- package.json
"rxjs": "^7.8.1",
"tslib": "^2.8.1",
+ "upper-case-first": "^3.0.0",
"zone.js": "^0.15.0"
},
--- src/app/status/status-badge.component.ts
-import { Component, input } from '@angular/core';
+import { Component, computed, input } from '@angular/core';
+import { upperCaseFirst } from 'upper-case-first';
@Component({
selector: 'app-status-badge',
- template: `<span class="status-badge" [class]="'status-badge--' + status()">{{ status() }}</span>`,
+ template: `<span class="status-badge" [class]="'status-badge--' + status()">{{ label() }}</span>`,
styles: `
.status-badge {
export class StatusBadgeComponent {
readonly status = input.required<string>();
+ readonly label = computed(() => upperCaseFirst(this.status()));
}