color-spark

Framework: angular

🚀 Color Spark Effect – Angular Integration Guide

The initSpark() utility enables automatic color-spark blink animations whenever bound values change in real time. This is ideal for trading apps, tickers, dashboards, live scores, and socket-based UIs.

📥 Installation & Import

import { initSpark } from "universe-code/angular";

1️⃣ Using `initSpark()` in a Component

Call initSpark() in ngOnInit() and store the cleanup function. Clean up in ngOnDestroy() to prevent memory leaks.

📁 realtime-data.component.ts

import { Component, OnInit, OnDestroy } from "@angular/core";
import { initSpark } from "universe-code/angular";

@Component({
  selector: "app-realtime-data",
  templateUrl: "./realtime-data.component.html",
})
export class RealtimeDataComponent implements OnInit, OnDestroy {
  cleanup?: () => void;

  back = 10;
  lay = 5;

  private timeoutId: any;

  ngOnInit(): void {
    // initialize spark listener
    this.cleanup = initSpark();

    // safe setTimeout usage
    this.timeoutId = setTimeout(() => {
      setInterval(() => {
        this.back = this.back + 1;
        this.lay = this.lay + 1;
      }, 1000);
    }, 2000);
  }

  ngOnDestroy(): void {
    // stop spark
    this.cleanup?.();

    // clear timeout
    if (this.timeoutId) {
      clearTimeout(this.timeoutId);
    }
  }
}

2️⃣ Using the Directive in Templates

Add the attribute:

data - color - spark;

⚠️ Important rule

Parent element must contain class back or lay
otherwise the spark will not blink

📁 realtime-data.component.html

html

<!-- Primary values -->
<div class="back" style="position: relative;">
  <span data-color-spark>{{ back }}</span>
</div>

<!-- Secondary values -->
<div class="lay" style="position: relative;">
  <span data-color-spark>{{ lay }}</span>
</div>

3️⃣ Required Global Styles

Add spark color variables in your global stylesheet:

📁 styles.css

css

:root {
  /* Customize blink colors */

  --spark-back-bg: #f8e71c;
  --spark-back-border: #f8e71c;

  --spark-lay-bg: #f8e71c;
  --spark-lay-border: #f8e71c;
}

✅ Defaults (auto-fallback)

If not provided, defaults are automatically used:

--spark-back-bg: #f8e71c;
--spark-back-border: #f8e71c;
--spark-lay-bg: #f8e71c;
--spark-lay-border: #f8e71c;

✅ How It Works

initSpark() scans the DOM
- Detects and observes elements with the data-color-spark attribute
When the element’s value changes a color spark animation is triggered
cleanup() automatically removes:
- observers
- intervals
- event listeners

✅ Ideal Use Cases

Crypto stock tickers
Trading dashboards
Real-time score updates
Socket-driven UIs
Currency exchange rates
Gaming leaderboards