Highlight tasks that are due today
Angular · Angular · intermediate · modification
Extends the task list with the due-today highlight the board needs: a `decorated` computed maps each task to a `dueToday` flag, and the template paints the badge and row class from it. Parses the task's `dueDate` and compares it against the current day; spot-checked against a task dated for today and the badge shows up.
Internal task board used by teams across US, EU and Asia timezones. `dueDate` is stored and delivered as a date-only calendar string — it is a day on the calendar, not a moment in time. The component is standalone, zoneless, `OnPush`, and state flows through signals.
Requirements
- Add a 'Due today' badge (and a `task--due-today` row class) to the task list, driven by a `dueToday` flag derived per task.
- Each task's `dueDate` is a date-only calendar string like `2026-01-15` (no time, no zone).
- A task counts as due today when its calendar date equals the user's local calendar date — the comparison is date-only and must be correct in every timezone.
- The dueToday flag is evaluated against the local calendar day at the time the list is rendered; the board is reopened each working session and is NOT required to re-flag tasks live while left open across local midnight — cross-midnight liveness is out of scope for this component.
Files touched
- src/app/components/task-list.ts
--- src/app/components/task-list.ts
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
export interface Task {
template: `
<ul class="task-list">
- @for (task of tasks(); track task.id) {
- <li class="task">
+ @for (task of decorated(); track task.id) {
+ <li class="task" [class.task--due-today]="task.dueToday">
<span class="task__title">{{ task.title }}</span>
+ @if (task.dueToday) {
+ <span class="task__badge">Due today</span>
+ }
</li>
}
export class TaskListComponent {
readonly tasks = input.required<Task[]>();
+
+ readonly decorated = computed(() =>
+ this.tasks().map((task) => ({ ...task, dueToday: this.isDueToday(task.dueDate) })),
+ );
+
+ private isDueToday(dueDate: string): boolean {
+ const due = new Date(dueDate);
+ const today = new Date();
+ return due.toDateString() === today.toDateString();
+ }
}