NgPulse — Angular Lifecycle Visualizer Widget

NgPulse is a compact, dark-theme vanilla-JS widget that renders an interactive Angular component lifecycle diagram — perfect as a teaching aid, onboarding tool, or living reference panel you can embed anywhere. Drop in one <script> tag and the widget self-mounts, animating each hook in real-time with a glowing pulse effect on a crisp Developer Console–style canvas.

What It Does

• Displays all 10 Angular lifecycle hooks (ngOnChanges → ngOnDestroy) in their correct execution order on an animated dark-teal timeline.
• Click any hook node to reveal a tooltip panel with the hook's purpose, when it fires, and a one-liner usage tip.
• Hit ▶ Simulate to watch the lifecycle animate step-by-step with glowing "active" states, mimicking a real component being created, updated, and destroyed.
• Toggle Change Detection mode to highlight which hooks re-fire on every CD cycle, giving learners an instant visual answer.

Who Is It For?

Angular developers, bootcamp instructors, tech bloggers and documentation authors who want a polished interactive reference without pulling in a full framework. Zero dependencies — just open index.html.