{"id":26533426,"url":"https://github.com/zenkiet/ngx-version-view","last_synced_at":"2025-07-10T20:10:57.629Z","repository":{"id":282935037,"uuid":"950127976","full_name":"zenkiet/ngx-version-view","owner":"zenkiet","description":"A powerful Angular library that enables version-aware component rendering for seamless feature toggling based on application versions.","archived":false,"fork":false,"pushed_at":"2025-06-24T14:19:38.000Z","size":203,"stargazers_count":9,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-24T15:34:41.982Z","etag":null,"topics":["angular","angularlibrary","library","npm"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zenkiet.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2025-03-17T17:12:14.000Z","updated_at":"2025-06-24T14:19:41.000Z","dependencies_parsed_at":"2025-06-03T12:09:30.305Z","dependency_job_id":"684fcbdf-1452-43f8-8a7a-ee670a61c228","html_url":"https://github.com/zenkiet/ngx-version-view","commit_stats":null,"previous_names":["zenkiet/ngx-version-view"],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/zenkiet/ngx-version-view","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zenkiet%2Fngx-version-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zenkiet%2Fngx-version-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zenkiet%2Fngx-version-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zenkiet%2Fngx-version-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zenkiet","download_url":"https://codeload.github.com/zenkiet/ngx-version-view/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zenkiet%2Fngx-version-view/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264648354,"owners_count":23643662,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["angular","angularlibrary","library","npm"],"created_at":"2025-03-21T19:02:17.930Z","updated_at":"2025-07-10T20:10:57.623Z","avatar_url":"https://github.com/zenkiet.png","language":"TypeScript","funding_links":[],"categories":["Recently Updated","Architecture and Advanced Topics"],"sub_categories":["[Mar 20, 2025](/content/2025/03/20/README.md)","Feature Flags"],"readme":"# 🚀 Ngx Version View\n\n\u003cdiv align=\"center\"\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/zenkiet/ngx-version-view/main/assets/logo.png\" alt=\"NgxVersionView Logo\" width=\"200\"/\u003e\n\u003c/p\u003e\n\n[![npm version](https://img.shields.io/npm/v/ngx-version-view.svg)](https://www.npmjs.com/package/ngx-version-view)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![Build Status](https://github.com/zenkiet/ngx-version-view/actions/workflows/release.yml/badge.svg)](https://github.com/zenkiet/ngx-version-view/actions)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)\n[![Angular](https://img.shields.io/badge/Angular-16+-red.svg)](https://angular.io)\n[![GitHub stars](https://img.shields.io/github/stars/zenkiet/traefik-tunnel-expose?style=flat-square\u0026logo=github)](https://github.com/zenkiet/traefik-tunnel-expose/stargazers)\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003e🎯 Smart Version-Aware Angular Library for Progressive Feature Management\u003c/strong\u003e\n\u003c/p\u003e\n\nA powerful Angular library that revolutionizes feature management through intelligent version-aware component rendering and routing. Perfect for progressive feature rollouts, maintaining backward compatibility and sophisticated release management strategies.\n\n[ Quick Start](#-quick-start) • [💬 Discussions](https://github.com/zenkiet/traefik-tunnel-expose/discussions)\n\n\u003c/div\u003e\n\n---\n\n## ✨ Core Features\n\n| Feature                              | Description                                                            |\n| ------------------------------------ | ---------------------------------------------------------------------- |\n| **🧩 Version-Aware Components**      | Automatically render different components based on application version |\n| **🛤️ Smart Version Routing**         | Route management with automatic version-based redirections             |\n| **🧠 Intelligent Feature Selection** | Algorithm-based component selection for optimal user experience        |\n| **⚙️ Multiple Version Strategies**   | Support for semantic (1.2.3) and date-based (2023-10-15) versioning    |\n| **🎨 Declarative API**               | Clean decorator-based approach with TypeScript support                 |\n| **💉 DI Integration**                | Seamless Angular Dependency Injection compatibility                    |\n| **🚀 Dynamic Loading**               | Efficient lazy loading and component resolution                        |\n| **🔍 Smart Caching**                 | Performance-optimized with intelligent caching mechanisms              |\n| **📦 Standalone Support**            | Full compatibility with Angular standalone components                  |\n\n---\n\n## 📋 Table of Contents\n\n- [🚀 Installation](#-installation)\n- [🏗️ Architecture Overview](#️-architecture-overview)\n- [⚡ Quick Start](#-quick-start)\n- [🧩 Component-Based Features](#-component-based-features)\n- [🛤️ Version-Aware Routing](#️-version-aware-routing)\n- [🎯 Advanced Usage](#-advanced-usage)\n- [📚 API Reference](#-api-reference)\n- [💡 Best Practices](#-best-practices)\n- [🔧 Configuration](#-configuration)\n- [📖 Examples](#-examples)\n- [🤝 Contributing](#-contributing)\n\n---\n\n## 🚀 Installation\n\n```bash\n# npm\nnpm install ngx-version-view --save\n\n# yarn\nyarn add ngx-version-view\n\n# pnpm\npnpm add ngx-version-view\n```\n\n---\n\n## 🏗️ Architecture Overview\n\n```mermaid\ngraph TD\n    A[\"🚀 Application Version Stream\"] --\u003e B[\"Version Strategy\"]\n    B --\u003e C{\"Version Type?\"}\n    C --\u003e|Semantic| D[\"SemanticVersionStrategy\u003cbr/\u003e1.0.0, 2.1.5\"]\n    C --\u003e|Date| E[\"DateVersionStrategy\u003cbr/\u003e2023-10-15, 01.12.2023\"]\n\n    F[\"📦 Feature Components\"] --\u003e G[\"@VersionFeature Decorator\"]\n    G --\u003e H[\"Component Registration\"]\n    H --\u003e I[\"ViewService Registry\"]\n\n    A --\u003e J[\"VersionFeatureComponent\"]\n    I --\u003e J\n    J --\u003e K[\"🎯 Render Appropriate Component\"]\n\n    L[\"🛤️ Route Configurations\"] --\u003e M[\"createVersionRoutes()\"]\n    M --\u003e N[\"Version Routes\"]\n    N --\u003e O[\"versionRouteGuard\"]\n    A --\u003e O\n    O --\u003e P[\"🔄 Auto Route Redirect\"]\n```\n\n---\n\n## ⚡ Quick Start\n\n### 1. 🔧 Configure Version Provider\n\nSet up the version management system in your application configuration:\n\n```typescript\n// app.config.ts\nimport { ApplicationConfig } from '@angular/core';\nimport { provideVersionView } from 'ngx-version-view';\nimport { BehaviorSubject } from 'rxjs';\n\n// Create version stream (could come from API, localStorage, etc.)\nconst versionStream = new BehaviorSubject\u003cstring\u003e('2.1.0');\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    // 🎯 Semantic versioning configuration\n    provideVersionView({\n      type: 'semantic',\n      version: versionStream,\n    }),\n\n    // 📅 Or date-based versioning\n    // provideVersionView({\n    //   type: 'date',\n    //   dateFormat: 'yyyy-MM-dd',\n    //   version: new BehaviorSubject('2023-10-15'),\n    // }),\n  ],\n};\n```\n\n### 2. 🎭 Create Version-Aware Components\n\nBuild components for different application versions:\n\n```typescript\n// components/dashboard-v1.component.ts\nimport { Component, Input } from '@angular/core';\nimport { VersionFeature } from 'ngx-version-view';\n\n@Component({\n  selector: 'app-dashboard-v1',\n  standalone: true,\n  template: `\n    \u003cdiv class=\"dashboard-v1\"\u003e\n      \u003ch2\u003e🎯 Dashboard v1.x\u003c/h2\u003e\n      \u003cp\u003eBasic dashboard for user: {{ userId }}\u003c/p\u003e\n      \u003c!-- Basic features only --\u003e\n    \u003c/div\u003e\n  `,\n  styles: [\n    `\n      .dashboard-v1 {\n        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n        padding: 2rem;\n        border-radius: 12px;\n        color: white;\n      }\n    `,\n  ],\n})\n@VersionFeature({\n  key: 'userDashboard',\n  minVersion: '1.0.0',\n  maxVersion: '2.0.0',\n})\nexport class DashboardV1Component {\n  @Input() userId: string = '';\n}\n\n// components/dashboard-v2.component.ts\n@Component({\n  selector: 'app-dashboard-v2',\n  standalone: true,\n  template: `\n    \u003cdiv class=\"dashboard-v2\"\u003e\n      \u003ch2\u003e🚀 Dashboard v2.x\u003c/h2\u003e\n      \u003cp\u003eAdvanced dashboard for user: {{ userId }}\u003c/p\u003e\n      \u003c!-- Advanced features with charts, analytics, etc. --\u003e\n    \u003c/div\u003e\n  `,\n  styles: [\n    `\n      .dashboard-v2 {\n        background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);\n        padding: 2rem;\n        border-radius: 12px;\n        color: white;\n      }\n    `,\n  ],\n})\n@VersionFeature({\n  key: 'userDashboard',\n  minVersion: '2.0.0',\n})\nexport class DashboardV2Component {\n  @Input() userId: string = '';\n}\n```\n\n### 3. 🎯 Use in Templates\n\nRender version-appropriate components automatically:\n\n```html\n\u003c!-- The magic happens here - automatic version selection! --\u003e\n\u003cngx-view-component\n  key=\"userDashboard\"\n  [data]=\"{ userId: currentUser.id }\"\n\u003e\n  \u003c!-- 🛡️ Fallback content when no version matches --\u003e\n  \u003cdiv class=\"fallback\"\u003e\n    \u003cp\u003e⚠️ This feature is not available in your current version\u003c/p\u003e\n    \u003cbutton (click)=\"upgradeVersion()\"\u003e🔄 Upgrade Now\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/ngx-view-component\u003e\n```\n\n---\n\n## 🧩 Component-Based Features\n\n### 🎨 Decorator-Based Configuration\n\nThe `@VersionFeature` decorator provides a clean, declarative way to define version constraints:\n\n```typescript\nimport { VersionFeature } from 'ngx-version-view';\n\n@VersionFeature({\n  key: 'paymentModule', // 🔑 Unique feature identifier\n  minVersion: '1.5.0', // 📊 Minimum supported version\n  maxVersion: '3.0.0', // 📈 Maximum supported version (optional)\n})\nexport class PaymentModuleComponent {\n  // Component implementation\n}\n```\n\n### 🔄 Programmatic Feature Management\n\nFor dynamic scenarios, use the `ViewService` directly:\n\n```typescript\nimport { Component, OnInit, computed } from '@angular/core';\nimport { ViewService } from 'ngx-version-view';\n\n@Component({\n  selector: 'app-feature-manager',\n  template: `\n    \u003cdiv class=\"version-info\"\u003e\n      \u003ch3\u003e📊 Current Version: {{ currentVersion() }}\u003c/h3\u003e\n      \u003cp\u003e🎯 Active Features: {{ activeFeatures().length }}\u003c/p\u003e\n    \u003c/div\u003e\n\n    \u003c!-- Dynamic component rendering --\u003e\n    \u003cng-container *ngComponentOutlet=\"featureComponent(); inputs: componentData()\"\u003e\u003c/ng-container\u003e\n  `,\n})\nexport class FeatureManagerComponent implements OnInit {\n  private viewService = inject(ViewService);\n\n  // 📡 Reactive current version\n  currentVersion = this.viewService.currentVersion;\n\n  // 🧮 Computed feature component\n  featureComponent = computed(() =\u003e this.viewService.getFeatureComponent('dynamicFeature'));\n\n  componentData = signal({ userId: 'user-123', theme: 'dark' });\n\n  // 📊 Get all active features (custom method)\n  activeFeatures = computed(() =\u003e {\n    // Implementation to get all active features\n    return [];\n  });\n\n  ngOnInit() {\n    // 📝 Register features programmatically\n    this.viewService.registerFeatures([\n      {\n        key: 'dynamicFeature',\n        minVersion: '1.0.0',\n        maxVersion: '2.0.0',\n        component: FeatureV1Component,\n      },\n      {\n        key: 'dynamicFeature',\n        minVersion: '2.0.0',\n        component: FeatureV2Component,\n      },\n    ]);\n  }\n}\n```\n\n---\n\n## 🛤️ Version-Aware Routing\n\n### 🚀 Smart Route Management\n\nNgxVersionView's routing system automatically redirects users to the appropriate version-specific routes:\n\n```typescript\n// app.routes.ts\nimport { Routes } from '@angular/router';\nimport { createVersionRoutes } from 'ngx-version-view';\n\nconst dashboardRoutes = createVersionRoutes([\n  {\n    version: '1.0.0',\n    loadComponent: () =\u003e\n      import('./features/dashboard-v1/dashboard-v1.component').then((m) =\u003e m.DashboardV1Component),\n    data: {\n      title: 'Dashboard v1.0',\n      features: ['basic-charts', 'user-profile'],\n    },\n  },\n  {\n    version: '2.0.0',\n    loadComponent: () =\u003e\n      import('./features/dashboard-v2/dashboard-v2.component').then((m) =\u003e m.DashboardV2Component),\n    data: {\n      title: 'Dashboard v2.0',\n      features: ['advanced-charts', 'analytics', 'real-time-data'],\n    },\n  },\n  {\n    version: '3.0.0',\n    loadComponent: () =\u003e\n      import('./features/dashboard-v3/dashboard-v3.component').then((m) =\u003e m.DashboardV3Component),\n    data: {\n      title: 'Dashboard v3.0',\n      features: ['ai-insights', 'predictive-analytics', 'custom-dashboards'],\n    },\n  },\n]);\n\nexport const routes: Routes = [\n  {\n    path: 'dashboard',\n    children: dashboardRoutes, // 🎯 Auto-versioned routes\n  },\n  // ... other routes\n];\n```\n\n### 🔄 Automatic Version Redirection\n\nThe `versionRouteGuard` automatically redirects users to the highest compatible version:\n\n```typescript\n// Example behavior:\n// User visits: /dashboard/1.0.0\n// App version: 2.1.0\n// Result: Automatic redirect to /dashboard/2.0.0\n\n// User visits: /dashboard/3.0.0\n// App version: 1.5.0\n// Result: Automatic redirect to /dashboard/1.0.0\n```\n\n### 🛡️ Route Guard Configuration\n\nThe guard works transparently with your route configurations:\n\n```typescript\n// The guard is automatically applied by createVersionRoutes()\n// But you can also use it manually:\n\nimport { versionRouteGuard } from 'ngx-version-view';\n\nconst customRoute: Route = {\n  path: 'custom/:version',\n  component: CustomComponent,\n  canActivate: [versionRouteGuard],\n  data: {\n    currentVersion: '2.0.0',\n    configs: [\n      /* version configs */\n    ],\n  },\n};\n```\n\n---\n\n## 🎯 Advanced Usage\n\n### 📅 Date-Based Versioning\n\nPerfect for applications using release dates as versions:\n\n```typescript\nimport { provideVersionView, DateFormat } from 'ngx-version-view';\n\n// Configuration\nprovideVersionView({\n  type: 'date',\n  dateFormat: 'yyyy-MM-dd',\n  version: new BehaviorSubject('2023-12-01'),\n});\n\n// Component with date-based versions\n@VersionFeature({\n  key: 'holidayTheme',\n  minVersion: '2023-12-01', // Available from December 1st\n  maxVersion: '2024-01-15', // Until January 15th\n})\nexport class HolidayThemeComponent {}\n```\n\n#### 📋 Supported Date Formats\n\n| Format       | Example    | Description               |\n| ------------ | ---------- | ------------------------- |\n| `yyyy-MM-dd` | 2023-12-25 | ISO date format (default) |\n| `MM-dd-yyyy` | 12-25-2023 | US date format            |\n| `dd-MM-yyyy` | 25-12-2023 | European date format      |\n| `yyyy.MM.dd` | 2023.12.25 | Dot-separated format      |\n| `MM.dd.yyyy` | 12.25.2023 | US dot format             |\n| `dd.MM.yyyy` | 25.12.2023 | European dot format       |\n\n### 🔄 Dynamic Version Updates\n\nUpdate application version at runtime and watch components automatically update:\n\n```typescript\n@Component({\n  selector: 'app-version-controller',\n  template: `\n    \u003cdiv class=\"version-control\"\u003e\n      \u003ch3\u003e🎛️ Version Control Panel\u003c/h3\u003e\n      \u003cp\u003eCurrent: {{ currentVersion() }}\u003c/p\u003e\n\n      \u003cdiv class=\"version-buttons\"\u003e\n        \u003cbutton\n          *ngFor=\"let v of availableVersions\"\n          (click)=\"setVersion(v)\"\n          [class.active]=\"currentVersion() === v\"\n        \u003e\n          🔄 Switch to {{ v }}\n        \u003c/button\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  `,\n})\nexport class VersionControllerComponent {\n  private versionStream = inject(VERSION_STREAM);\n  private viewService = inject(ViewService);\n\n  currentVersion = this.viewService.currentVersion;\n  availableVersions = ['1.0.0', '2.0.0', '2.5.0', '3.0.0'];\n\n  setVersion(version: string) {\n    this.versionStream.next(version);\n    // 🎯 All version-aware components automatically update!\n  }\n}\n```\n\n## 💡 Best Practices\n\n### 🏗️ Architecture Guidelines\n\n1. **🎯 Consistent Feature Keys**\n\n   ```typescript\n   // ✅ Good - Descriptive and consistent\n   const FEATURE_KEYS = {\n     USER_DASHBOARD: 'userDashboard',\n     PAYMENT_MODULE: 'paymentModule',\n     ANALYTICS_PANEL: 'analyticsPanel',\n   } as const;\n   ```\n\n2. **📊 Clear Version Boundaries**\n\n   ```typescript\n   // ✅ Good - Clear version ranges\n   @VersionFeature({\n     key: 'feature',\n     minVersion: '2.0.0',    // Inclusive\n     maxVersion: '3.0.0'     // Exclusive\n   })\n   ```\n\n3. **🛡️ Always Provide Fallbacks**\n   ```html\n   \u003c!-- ✅ Good - Graceful degradation --\u003e\n   \u003cngx-view-component key=\"newFeature\"\u003e\n     \u003cdiv class=\"fallback\"\u003e\n       \u003cp\u003eThis feature requires app version 2.0+\u003c/p\u003e\n       \u003cbutton (click)=\"showUpgradePrompt()\"\u003eUpgrade\u003c/button\u003e\n     \u003c/div\u003e\n   \u003c/ngx-view-component\u003e\n   ```\n\n### 🚀 Performance Optimization\n\n1. **💾 Leverage Built-in Caching**\n\n   - Component resolution is automatically cached\n   - Version comparisons are memoized\n   - Clear cache when needed: `viewService.clearRegistry()`\n\n2. **🔄 Lazy Loading**\n\n   ```typescript\n   // Use loadComponent for better performance\n   {\n     version: '2.0.0',\n     loadComponent: () =\u003e import('./heavy-component').then(m =\u003e m.HeavyComponent)\n   }\n   ```\n\n3. **📊 Efficient Version Strategies**\n   - Semantic versioning is faster for simple comparisons\n   - Date versioning offers more flexibility but slightly slower\n\n---\n\n## 🔧 Configuration\n\n### 🌐 Environment-Based Configuration\n\n```typescript\n// environments/environment.ts\nexport const environment = {\n  production: false,\n  version: '2.1.0-dev',\n  versionStrategy: 'semantic' as const,\n};\n\n// app.config.ts\nimport { environment } from './environments/environment';\n\nconst versionStream = new BehaviorSubject(environment.version);\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideVersionView({\n      type: environment.versionStrategy,\n      version: versionStream,\n    }),\n  ],\n};\n```\n\n### 🔄 Dynamic Version Loading\n\n```typescript\n// Load version from API\nfunction createVersionFactory(http: HttpClient) {\n  return (injector: Injector) =\u003e {\n    return runInInjectionContext(injector, () =\u003e\n      http.get\u003c{ version: string }\u003e('/api/app-info').pipe(\n        map((response) =\u003e response.version),\n        startWith('1.0.0') // Fallback version\n      )\n    );\n  };\n}\n\n// Configuration\nprovideVersionView({\n  type: 'semantic',\n  versionFactory: createVersionFactory(inject(HttpClient)),\n});\n```\n\n---\n\n## 📖 Examples\n\n### 🎨 Progressive UI Enhancement\n\n```typescript\n// Basic UI for older versions\n@VersionFeature({\n  key: 'userInterface',\n  maxVersion: '2.0.0',\n})\nexport class BasicUIComponent {\n  // Simple, lightweight interface\n}\n\n// Enhanced UI for newer versions\n@VersionFeature({\n  key: 'userInterface',\n  minVersion: '2.0.0',\n  maxVersion: '3.0.0',\n})\nexport class EnhancedUIComponent {\n  // Rich interactions, animations\n}\n\n// Modern UI for latest versions\n@VersionFeature({\n  key: 'userInterface',\n  minVersion: '3.0.0',\n})\nexport class ModernUIComponent {\n  // Cutting-edge features, advanced animations\n}\n```\n\n### 🔒 Feature Gating\n\n```typescript\n// Premium features only in paid versions\n@VersionFeature({\n  key: 'premiumFeatures',\n  minVersion: '2.0.0-premium',\n})\nexport class PremiumFeaturesComponent {}\n\n// Beta features for testing\n@VersionFeature({\n  key: 'experimentalAI',\n  minVersion: '3.0.0-beta.1',\n  maxVersion: '3.0.0-rc.1',\n})\nexport class ExperimentalAIComponent {}\n```\n\n### 🌍 Multi-tenant Applications\n\n```typescript\n// Different features per tenant version\n@VersionFeature({\n  key: 'tenantDashboard',\n  minVersion: 'enterprise-2.0',\n})\nexport class EnterpriseDashboardComponent {}\n\n@VersionFeature({\n  key: 'tenantDashboard',\n  minVersion: 'starter-1.0',\n  maxVersion: 'enterprise-2.0',\n})\nexport class StarterDashboardComponent {}\n```\n\n---\n\n## 🤝 Contributing\n\nWe welcome contributions! Here's how you can help:\n\n### 🐛 Bug Reports\n\n1. 🔍 Search existing issues\n2. 📝 Create detailed bug report\n3. 🏷️ Use appropriate labels\n\n### ✨ Feature Requests\n\n1. 💡 Discuss in GitHub Discussions\n2. 📋 Create feature request issue\n3. 🚀 Submit pull request\n\n### 🛠️ Development Workflow\n\n```bash\n# 🍴 Fork and clone\ngit clone https://github.com/your-username/ngx-version-view.git\ncd ngx-version-view\n\n# 🌿 Create feature branch\ngit checkout -b feature/amazing-feature\n\n# 🔧 Install dependencies\nnpm install\n\n# 🔧 Make changes and test\nnpm run build\n\n# ✅ Commit changes\ngit commit -m \"✨ Add amazing feature\"\ngit push origin feature/amazing-feature\n\n# 🚀 Push and create PR\ngh pr create --fill\n```\n\n### 📝 Commit Convention\n\nWe use [Conventional Commits](https://www.conventionalcommits.org/):\n\n- `✨ feat:` New features\n- `🐛 fix:` Bug fixes\n- `📚 docs:` Documentation\n- `🎨 style:` Code formatting\n- `♻️ refactor:` Code restructuring\n- `⚡ perf:` Performance improvements\n- `✅ test:` Testing\n- `🔧 chore:` Maintenance\n\n---\n\n## 📄 License\n\nThis project is licensed under the **MIT License** - see the [LICENSE](LICENSE) file for details.\n\n```\nMIT License\n\nCopyright (c) 2025 ZenKiet\n```\n\n---\n\n## 🙏 Acknowledgments\n\nThis project wouldn't be possible without these amazing technologies:\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\" width=\"150px\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/angular/angular/refs/heads/main/adev/src/assets/images/press-kit/angular_icon_gradient.gif\" width=\"60\" height=\"60\" alt=\"Angular\"\u003e\n\u003cbr\u003e\u003cstrong\u003eAngular\u003c/strong\u003e\n\u003cbr\u003e\u003cem\u003eBest Framework\u003c/em\u003e\n\u003c/td\u003e\n\u003ctd align=\"center\" width=\"150px\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/github/explore/refs/heads/main/topics/typescript/typescript.png\" width=\"48\" height=\"48\" alt=\"Cloudflare\"\u003e\n\u003cbr\u003e\u003cstrong\u003eTypescript\u003c/strong\u003e\n\u003cbr\u003e\u003cem\u003eJS Compiler\u003c/em\u003e\n\u003c/td\u003e\n\u003ctd align=\"center\" width=\"150px\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/ReactiveX/rxjs/refs/heads/master/apps/rxjs.dev/src/assets/images/logos/Rx_Logo_S.png\" width=\"48\" height=\"48\" alt=\"Alpine\"\u003e\n\u003cbr\u003e\u003cstrong\u003eRxJS\u003c/strong\u003e\n\u003cbr\u003e\u003cem\u003eReactive Library\u003c/em\u003e\n\u003c/td\u003e\n\u003ctd align=\"center\" width=\"150px\"\u003e\n\u003cimg src=\"https://upload.wikimedia.org/wikipedia/commons/0/04/ChatGPT_logo.svg\" width=\"48\" height=\"48\" alt=\"Docker\"\u003e\n\u003cbr\u003e\u003cstrong\u003eChatGPT\u003c/strong\u003e\n\u003cbr\u003e\u003cem\u003eResearch\u003c/em\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n---\n\n## 📞 Support\n\n\u003cdiv align=\"center\"\u003e\n\n### 🤝 Get Help \u0026 Connect\n\n[![Email](https://img.shields.io/badge/Email-zenkiet0906%40gmail.com-red?style=for-the-badge\u0026logo=gmail\u0026logoColor=white)](mailto:zenkiet0906@gmail.com)\n[![GitHub Issues](https://img.shields.io/badge/Issues-GitHub-green?style=for-the-badge\u0026logo=github\u0026logoColor=white)](https://github.com/zenkiet/ngx-version-view/issues)\n[![Discussions](https://img.shields.io/badge/Discussions-GitHub-blue?style=for-the-badge\u0026logo=github\u0026logoColor=white)](https://github.com/zenkiet/ngx-version-view/discussions)\n\n### 📊 Project Stats\n\n![GitHub contributors](https://img.shields.io/github/contributors/zenkiet/ngx-version-view?style=flat-square)\n![GitHub last commit](https://img.shields.io/github/last-commit/zenkiet/ngx-version-view?style=flat-square)\n![GitHub repo size](https://img.shields.io/github/repo-size/zenkiet/ngx-version-view?style=flat-square)\n\n\u003c/div\u003e\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n**⭐ If this project helped you, please consider giving it a star! ⭐**\n\n_Made with ❤️ by [ZenKiet](https://github.com/zenkiet)_\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzenkiet%2Fngx-version-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzenkiet%2Fngx-version-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzenkiet%2Fngx-version-view/lists"}