🕒 @myangularapps/analog-clock

A lightweight reusable Angular Analog Clock component.

📦 Installation

From npmjs.org:

npm install @myangularapps/analog-clock

🚀 Usage

In your Angular component:

import { Component } from '@angular/core';
import { AnalogClock } from '@myangularapps/analog-clock';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AnalogClock],
  template: `
    <analog-clock [options]="{ size: 200, showNumbers: true }"></analog-clock>
  `
})
export class AppComponent {}

⚙️ Options

Option	Type	Defaut	Description
size	number	150	Clock diameter in pixels.
showNumbers	boolean	true	Display numbers 1–12
showTicks	boolean	true	Show minute/hour ticks
theme	AnalogClockTheme	default colors	Customize colors
useLocalTime	boolean	true	Use system time

🎨 Example Custom Theme

options = {
  size: 250,
  theme: {
    face: '#fff',
    border: '#000',
    hourHand: '#222',
    minuteHand: '#444',
    secondHand: '#e74c3c',
    number: '#333',
    hourMark: '#666'
  }
};

---

🔗 Live Demo

👉 Click here to try Analog-Clock

---

📄 License MIT © Abdelwaheb AMMAR