https://github.com/ahmadfakher/ngx-starflow
https://github.com/ahmadfakher/ngx-starflow
Last synced: 2 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/ahmadfakher/ngx-starflow
- Owner: ahmadfakher
- Created: 2026-04-18T23:22:15.000Z (2 months ago)
- Default Branch: master
- Last Pushed: 2026-05-03T00:28:43.000Z (about 2 months ago)
- Last Synced: 2026-05-03T02:26:12.884Z (about 2 months ago)
- Language: TypeScript
- Size: 88.9 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-angular - ngx-starflow - A lightweight Angular component for displaying fractional star ratings with full precision. (Third Party Components / Form Controls)
- fucking-awesome-angular - ngx-starflow - A lightweight Angular component for displaying fractional star ratings with full precision. (Third Party Components / Form Controls)
README
# ⭐ 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:
- ⭐ `` → display-only rating component
- ✍️ `` → interactive rating input component
---
# 🚀 What’s new in v2.0
## ✨ New components
- `` (replaces `ngx-starflow`)
- `` (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
```bash
npm install ngx-starflow
```
---
# ⚙️ Requirements
- Angular 17+
- Font Awesome
## Install Font Awesome
```bash
npm install @fortawesome/fontawesome-free
```
Add to your `angular.json`:
```json
"styles": [
"node_modules/@fortawesome/fontawesome-free/css/all.min.css"
]
```
---
# ⭐ Starflow (Display Component)
## Import
```ts
import { Starflow } from 'ngx-starflow';
```
## Usage
```ts
@Component({
standalone: true,
imports: [Starflow],
template: ``,
})
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
```html
```
---
# ✍️ Starflow Input Component
## Import
```ts
import { StarflowInput } from 'ngx-starflow';
```
## Usage
```ts
@Component({
standalone: true,
imports: [StarflowInput],
template: `
`,
})
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
```html
```
---
# 🧠 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
```html
```
---
# 🧠 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