https://github.com/eastcoastdeveloper/angular-countdown-timer-component
Angular Countdown Timer
https://github.com/eastcoastdeveloper/angular-countdown-timer-component
angular angular-app angular-component angular-components angular-countdown angular-sample-app angular-timer countdown-timer countdown-timers timer
Last synced: 12 days ago
JSON representation
Angular Countdown Timer
- Host: GitHub
- URL: https://github.com/eastcoastdeveloper/angular-countdown-timer-component
- Owner: eastcoastdeveloper
- Created: 2022-11-01T23:02:45.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-12-05T21:26:44.000Z (6 months ago)
- Last Synced: 2025-12-09T11:13:18.861Z (6 months ago)
- Topics: angular, angular-app, angular-component, angular-components, angular-countdown, angular-sample-app, angular-timer, countdown-timer, countdown-timers, timer
- Language: TypeScript
- Homepage: https://stackblitz.com/edit/angular-countdown-timer-component
- Size: 40 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular Countdown Timer Comonent
Angular Countdown Timer — Technical Documentation
Overview
This document explains the architecture and implementation details of the Angular Countdown Timer component, including:
Template structure
DOM access via ViewChild
Time calculations
Update loop and lifecycle timing
Data flow between component logic and the DOM
```
Countdown to {{ currentTime }}
Days
Hours
Minutes
Seconds
```
Key Points
```
{{ currentTime }} displays the human-readable target date.
```
Template reference variables (#days, #hours, etc.) enable direct DOM manipulation using @ViewChild.
2. Component Logic (app.component.ts):
```
import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent implements AfterViewInit {
date: any;
now: any;
targetDate: any = new Date(2026, 11, 31);
targetTime: any = this.targetDate.getTime();
difference: number;
months: Array = [
'January','February','March','April','May','June',
'July','August','September','October','November','December',
];
currentTime: any = `${
this.months[this.targetDate.getMonth()]
} ${this.targetDate.getDate()}, ${this.targetDate.getFullYear()}`;
@ViewChild('days', { static: true }) days: ElementRef;
@ViewChild('hours', { static: true }) hours: ElementRef;
@ViewChild('minutes', { static: true }) minutes: ElementRef;
@ViewChild('seconds', { static: true }) seconds: ElementRef;
ngAfterViewInit() {
setInterval(() => {
this.tickTock();
this.difference = this.targetTime - this.now;
this.difference = this.difference / (1000 * 60 * 60 * 24);
!isNaN(this.days.nativeElement.innerText)
? (this.days.nativeElement.innerText = Math.floor(this.difference))
: (this.days.nativeElement.innerHTML = `
`);
}, 1000);
}
tickTock() {
this.date = new Date();
this.now = this.date.getTime();
this.days.nativeElement.innerText = Math.floor(this.difference);
this.hours.nativeElement.innerText = 23 - this.date.getHours();
this.minutes.nativeElement.innerText = 60 - this.date.getMinutes();
this.seconds.nativeElement.innerText = 60 - this.date.getSeconds();
}
}
```
3. Target Date and Display Formatting
Target Date Initialization
```
targetDate = new Date(2026, 11, 31);
targetTime = this.targetDate.getTime();
```
JavaScript months are 0-indexed (11 = December).
targetTime stores the timestamp in milliseconds.
Human-Readable Date
currentTime = "December 31, 2026";
This value is rendered in the template.
4. DOM Access Using @ViewChild
```
@ViewChild('days') days: ElementRef;
@ViewChild('hours') hours: ElementRef;
@ViewChild('minutes') minutes: ElementRef;
@ViewChild('seconds') seconds: ElementRef;
```
| Template Ref | DOM Updates | Purpose |
| ------------ | ---------------- | ------------------------ |
| `#days` | `innerText` | Shows remaining days |
| `#hours` | `innerText` | Hours left today |
| `#minutes` | `innerText` | Minutes left this hour |
| `#seconds` | `innerText` | Seconds left this minute |
5. Update Cycle (ngAfterViewInit())
Executed after the view initializes:
```
setInterval(() => {
this.tickTock();
this.difference = (this.targetTime - this.now) / (1000 * 60 * 60 * 24);
this.days.nativeElement.innerText = Math.floor(this.difference);
}, 1000);
```
Calls tickTock() every second.
Computes total days remaining.
Updates the DOM with new values.
6. Time Calculation Logic (tickTock())
```
tickTock() {
this.date = new Date();
this.now = this.date.getTime();
this.days.nativeElement.innerText = Math.floor(this.difference);
this.hours.nativeElement.innerText = 23 - this.date.getHours();
this.minutes.nativeElement.innerText = 60 - this.date.getMinutes();
this.seconds.nativeElement.innerText = 60 - this.date.getSeconds();
}
```
Breakdown
| Unit | Calculation | Explanation |
| ------- | ------------------------ | ------------------------------------------ |
| Days | `Math.floor(difference)` | Derived from total milliseconds difference |
| Hours | `23 - currentHour` | Remaining hours today |
| Minutes | `60 - currentMinutes` | Remaining minutes this hour |
| Seconds | `60 - currentSeconds` | Remaining seconds this minute |
7. Summary
The countdown timer calculates the difference between the current time and a future target date.
It updates DOM values every second via setInterval inside ngAfterViewInit().
Uses @ViewChild to directly modify DOM elements.
Displays days, hours, minutes, and seconds remaining with a clean UI.