{"id":49425206,"url":"https://github.com/ahmadfakher/ngx-starflow","last_synced_at":"2026-06-28T02:33:11.763Z","repository":{"id":355319242,"uuid":"1214694885","full_name":"ahmadfakher/ngx-starflow","owner":"ahmadfakher","description":null,"archived":false,"fork":false,"pushed_at":"2026-05-03T00:28:43.000Z","size":91,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-05-03T02:26:12.884Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ahmadfakher.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-18T23:22:15.000Z","updated_at":"2026-05-03T00:28:47.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/ahmadfakher/ngx-starflow","commit_stats":null,"previous_names":["ahmadfakher/ngx-starflow"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/ahmadfakher/ngx-starflow","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmadfakher%2Fngx-starflow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmadfakher%2Fngx-starflow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmadfakher%2Fngx-starflow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmadfakher%2Fngx-starflow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ahmadfakher","download_url":"https://codeload.github.com/ahmadfakher/ngx-starflow/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmadfakher%2Fngx-starflow/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34875357,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-28T02:00:05.809Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-04-29T09:00:40.636Z","updated_at":"2026-06-28T02:33:11.758Z","avatar_url":"https://github.com/ahmadfakher.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Form Controls"],"readme":"# ⭐ ngx-starflow\n\n![npm version](https://img.shields.io/npm/v/ngx-starflow)\n![npm downloads](https://img.shields.io/npm/dm/ngx-starflow)\n![GitHub release](https://img.shields.io/github/v/release/ahmadfakher/ngx-starflow)\n![license](https://img.shields.io/npm/l/ngx-starflow)\n\n**ngx-starflow v2.0** is a lightweight Angular star rating library with **fractional precision display** and a new **interactive input component**.\n\nIt provides:\n- ⭐ `\u003cstarflow\u003e` → display-only rating component\n- ✍️ `\u003cstarflow-input\u003e` → interactive rating input component\n\n---\n\n# 🚀 What’s new in v2.0\n\n## ✨ New components\n- `\u003cstarflow\u003e` (replaces `ngx-starflow`)\n- `\u003cstarflow-input\u003e` (new rating input component)\n\n## 🧠 Improvements\n- Bug fixes \u0026 stability improvements\n- Better Angular signals support\n- Improved form handling\n- Clear separation between display and input components\n\n---\n\n# ✨ Features\n\n- 🎯 Fractional ratings support (e.g. 3.7, 4.25)\n- ⚡ Lightweight standalone Angular components\n- 🎨 Fully customizable (size, spacing, colors, icons)\n- 🚫 No Tailwind dependency\n- ⭐ Font Awesome based rendering\n- 🔁 Reactive Forms + Output support\n- 🧩 Separate display \u0026 input components\n\n---\n\n# 📦 Installation\n\n```bash\nnpm install ngx-starflow\n```\n\n---\n\n# ⚙️ Requirements\n\n- Angular 17+\n- Font Awesome\n\n## Install Font Awesome\n\n```bash\nnpm install @fortawesome/fontawesome-free\n```\n\nAdd to your `angular.json`:\n\n```json\n\"styles\": [\n  \"node_modules/@fortawesome/fontawesome-free/css/all.min.css\"\n]\n```\n\n---\n\n# ⭐ Starflow (Display Component)\n\n## Import\n\n```ts\nimport { Starflow } from 'ngx-starflow';\n```\n\n## Usage\n\n```ts\n@Component({\n  standalone: true,\n  imports: [Starflow],\n  template: `\u003cstarflow [rating]=\"4.3\"\u003e\u003c/starflow\u003e`,\n})\nexport class AppComponent {}\n```\n\n---\n\n## Inputs\n\n| Input       | Type   | Default            | Description            |\n|-------------|--------|--------------------|------------------------|\n| `rating`    | number | —                  | Rating (0 → 5)        |\n| `size`      | string | `md`               | Star size             |\n| `spacing`   | number | `0`                | Gap between stars     |\n| `bgColor`   | string | `#737373`          | Inactive star color    |\n| `activeColor` | string | `#f0b100`        | Active star color      |\n| `iconClass` | string | `fa-regular fa-star` | Star icon class      |\n\n---\n\n## Example\n\n```html\n\u003cstarflow [rating]=\"3.8\" size=\"lg\" [spacing]=\"2\"\u003e\u003c/starflow\u003e\n```\n\n---\n\n# ✍️ Starflow Input Component\n\n## Import\n\n```ts\nimport { StarflowInput } from 'ngx-starflow';\n```\n\n## Usage\n\n```ts\n@Component({\n  standalone: true,\n  imports: [StarflowInput],\n  template: `\n    \u003cstarflow-input\n      (ratingChange)=\"onRatingChange($event)\"\u003e\n    \u003c/starflow-input\u003e\n  `,\n})\nexport class AppComponent {\n  onRatingChange(value: number) {\n    console.log(value);\n  }\n}\n```\n\n---\n\n## Outputs\n\n| Output | Type   | Description        |\n|--------|--------|--------------------|\n| `ratingChange` | number | Emits rating value |\n\n---\n\n## Inputs\n\n| Input        | Type    | Default              | Description            |\n|--------------|---------|----------------------|------------------------|\n| `required`   | boolean | `false`              | Required validation    |\n| `size`       | string  | `md`                 | Star size             |\n| `spacing`    | number  | `0`                  | Gap between stars     |\n| `bgColor`    | string  | `#737373`            | Background stars color |\n| `hoverColor` | string  | `#f0b1004D`          | Hover color            |\n| `activeColor`| string  | `#f0b100`            | Active color           |\n| `iconClass`  | string  | `fa-regular fa-star` | Star icon class        |\n\n---\n\n## Example\n\n```html\n\u003cstarflow-input\n  [required]=\"true\"\n  size=\"lg\"\n  [spacing]=\"2\"\n  (ratingChange)=\"onRatingChange($event)\"\u003e\n\u003c/starflow-input\u003e\n```\n\n---\n\n# 🧠 Validation\n\nBuilt-in validation:\n- required\n- min (0)\n- max (5)\n\nErrors:\n- Rating is required\n- Rating must be between 0 and 5\n\n---\n\n# 🎨 Size Options\n\n- xs → 12px  \n- sm → 14px  \n- md → 16px (default)  \n- lg → 18px  \n- xl → 20px  \n- 2xl → 24px  \n- 3xl → 30px  \n- 4xl → 36px  \n\n---\n\n# 📏 Spacing Options\n\n- 0 → none  \n- 1 → 4px  \n- 2 → 8px  \n- 3 → 12px  \n- 4 → 16px  \n- 5 → evenly spaced  \n\n---\n\n# 🎨 Customization\n\n```html\n\u003cstarflow bgColor=\"#ccc\" activeColor=\"gold\"\u003e\u003c/starflow\u003e\n```\n\n---\n\n# 🧠 How it works\n\n- Background stars (inactive layer)\n- Foreground stars (active layer)\n- Fractional rendering using CSS clipping (`clip-path`)\n\n---\n\n# 📌 Roadmap\n\n- [ ] Two-way binding `[(rating)]`\n- [ ] Half-star support\n- [ ] Animations\n- [ ] ControlValueAccessor support\n- [ ] RTL support\n\n---\n\n# 🤝 Contributing\n\nPull requests and issues are welcome.\n\n---\n\n# 📄 License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahmadfakher%2Fngx-starflow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fahmadfakher%2Fngx-starflow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahmadfakher%2Fngx-starflow/lists"}