⭐ ngx-starflow

ngx-starflow v2.0 is a lightweight Angular star rating library with fractional precision display and a new interactive input component.

It provides:

• ⭐ <starflow> → display-only rating component
• ✍️ <starflow-input> → interactive rating input component

---

🚀 What’s new in v2.0

✨ New components

• <starflow> (replaces ngx-starflow)
• <starflow-input> (new rating input component)

🧠 Improvements

• Bug fixes & stability improvements
• Better Angular signals support
• Improved form handling
• Clear separation between display and input components

---

✨ Features

• 🎯 Fractional ratings support (e.g. 3.7, 4.25)
• ⚡ Lightweight standalone Angular components
• 🎨 Fully customizable (size, spacing, colors, icons)
• 🚫 No Tailwind dependency
• ⭐ Font Awesome based rendering
• 🔁 Reactive Forms + Output support
• 🧩 Separate display & input components

---

📦 Installation

npm install ngx-starflow

---

⚙️ Requirements

• Angular 17+
• Font Awesome

Install Font Awesome

npm install @fortawesome/fontawesome-free

Add to your angular.json:

"styles": [
  "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
]

---

⭐ Starflow (Display Component)

Import

import { Starflow } from 'ngx-starflow';

Usage

@Component({
  standalone: true,
  imports: [Starflow],
  template: `<starflow [rating]="4.3"></starflow>`,
})
export class AppComponent {}

---

Inputs

Input	Type	Default	Description
rating	number	—	Rating (0 → 5)
size	string	md	Star size
spacing	number	0	Gap between stars
bgColor	string	#737373	Inactive star color
activeColor	string	#f0b100	Active star color
iconClass	string	fa-regular fa-star	Star icon class

---

Example

<starflow [rating]="3.8" size="lg" [spacing]="2"></starflow>

---

✍️ Starflow Input Component

Import

import { StarflowInput } from 'ngx-starflow';

Usage

@Component({
  standalone: true,
  imports: [StarflowInput],
  template: `
    <starflow-input
      (ratingChange)="onRatingChange($event)">
    </starflow-input>
  `,
})
export class AppComponent {
  onRatingChange(value: number) {
    console.log(value);
  }
}

---

Outputs

Output	Type	Description
ratingChange	number	Emits rating value

---

Inputs

Input	Type	Default	Description
required	boolean	false	Required validation
size	string	md	Star size
spacing	number	0	Gap between stars
bgColor	string	#737373	Background stars color
hoverColor	string	#f0b1004D	Hover color
activeColor	string	#f0b100	Active color
iconClass	string	fa-regular fa-star	Star icon class

---

Example

<starflow-input
  [required]="true"
  size="lg"
  [spacing]="2"
  (ratingChange)="onRatingChange($event)">
</starflow-input>

---

🧠 Validation

Built-in validation:

• required
• min (0)
• max (5)

Errors:

• Rating is required
• Rating must be between 0 and 5

---

🎨 Size Options

• xs → 12px
• sm → 14px
• md → 16px (default)
• lg → 18px
• xl → 20px
• 2xl → 24px
• 3xl → 30px
• 4xl → 36px

---

📏 Spacing Options

• 0 → none
• 1 → 4px
• 2 → 8px
• 3 → 12px
• 4 → 16px
• 5 → evenly spaced

---

🎨 Customization

<starflow bgColor="#ccc" activeColor="gold"></starflow>

---

🧠 How it works

• Background stars (inactive layer)
• Foreground stars (active layer)
• Fractional rendering using CSS clipping (clip-path)

---

📌 Roadmap

• Two-way binding [(rating)]
• Half-star support
• Animations
• ControlValueAccessor support
• RTL support

---

🤝 Contributing

Pull requests and issues are welcome.

---

📄 License

MIT