NgPulse — Angular Lifecycle Visualizer Widget

NgPulse — Real-Time Angular Lifecycle Event Visualizer

NgPulse is a compact, self-contained vanilla-JS widget styled as a dark Developer Console panel — purpose-built for Angular developers who want to understand, demonstrate, or teach Angular component lifecycle hooks. Drop the single index.html into any project or lesson, open it in a browser, and watch every hook fire in real time with animated, timestamped log entries.

The demo simulates a realistic Angular component tree: a parent AppComponent and a child UserCardComponent, each wired to all eight canonical lifecycle hooks. Trigger Create, Change Detection, Input Change, and Destroy events via the control panel, then watch the console timeline light up with color-coded hook firings, duration badges, and call-count indicators.

What's Inside

• Self-contained index.html — zero dependencies, no build step
• Animated dark-console UI with phosphor-green accent on a near-black canvas
• Eight Angular lifecycle hooks simulated: ngOnChanges, ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked, ngOnDestroy
• Live call-count badges and relative timestamps per hook entry
• Filter panel — show only the hooks you care about
• Auto-scroll with pause-on-hover, plus a manual Clear button
• Compact README for buyers

Perfect as a teaching aid, an onboarding companion for junior Angular devs, or a live reference tool during code reviews. No Angular runtime required — runs entirely in the browser.