NgPulse — Angular Lifecycle Visualizer Widget

See Your Angular Components Breathe

NgPulse is a compact, zero-dependency dark-theme widget that visualizes Angular component lifecycle hooks in real time — right inside a standalone demo page. Drop it into any Angular learning session, workshop, or documentation site to make abstract lifecycle concepts instantly tangible. Watch hooks fire, track timing, and replay event sequences with a crisp, terminal-inspired UI.

What's Inside

• A self-contained vanilla-JS lifecycle simulator styled to mirror how Angular hooks behave — no Angular runtime needed to run the demo
• Real-time hook event log with timestamps, hook names, color-coded badge categories (init · change · render · destroy) and sequence numbers
• Interactive controls — trigger Input Change, force Re-render, and Destroy/Recreate the simulated component with animated state transitions
• Pulse timeline bar that visually beats on each hook fire, giving a heartbeat-style rhythm to the lifecycle flow

Who Is It For?

Angular instructors, bootcamp students, tech writers building Angular documentation, and developers who want a sharp, embeddable explainer widget for lifecycle hooks. Also makes a great portfolio piece or interactive slide companion.