{"id":20186090,"url":"https://github.com/leolanese/angular-feature-flag","last_synced_at":"2025-03-03T06:44:12.445Z","repository":{"id":242562528,"uuid":"809902455","full_name":"leolanese/Angular-Feature-Flag","owner":"leolanese","description":"Implementing feature toggles in an Angular (17+) application using APP_INITIALIZER is a powerful technique. Feature toggles enable you to conditionally activate or deactivate specific features in your application based on configuration settings. This approach can be particularly useful for deploying features incrementally","archived":false,"fork":false,"pushed_at":"2024-09-11T10:25:00.000Z","size":213,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-24T12:11:33.805Z","etag":null,"topics":["angular","initializer","standalone","typescript"],"latest_commit_sha":null,"homepage":"","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/leolanese.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}},"created_at":"2024-06-03T17:07:06.000Z","updated_at":"2024-09-11T10:25:03.000Z","dependencies_parsed_at":null,"dependency_job_id":"d402ae36-1432-4c3a-9843-cfcd891ce060","html_url":"https://github.com/leolanese/Angular-Feature-Flag","commit_stats":null,"previous_names":["leolanese/angular-feature-flag"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leolanese%2FAngular-Feature-Flag","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leolanese%2FAngular-Feature-Flag/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leolanese%2FAngular-Feature-Flag/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leolanese%2FAngular-Feature-Flag/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leolanese","download_url":"https://codeload.github.com/leolanese/Angular-Feature-Flag/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241622593,"owners_count":19992501,"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","initializer","standalone","typescript"],"created_at":"2024-11-14T03:15:57.566Z","updated_at":"2025-03-03T06:44:12.420Z","avatar_url":"https://github.com/leolanese.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular (17+) Feature Flags 🚩\n\n\u003e Implementing feature toggles in an Angular (17+) application using APP_INITIALIZER is a powerful technique. Feature toggles enable you to conditionally activate or deactivate specific features in your application based on configuration settings. This approach can be particularly useful for deploying features incrementally\n\n## Demo App\n\n![alt text](./src/assets/image.png)\n\n## Unit-test CLI\n\n![alt text](./src/assets/unit-tests.png)\n\n\n## Unit-test browser\n\n![alt text](./src/assets/unit-test-browser.png)\n\n\n## APP_INITIALIZER Token\n\nThe `APP_INITIALIZER` token in Angular is a `dependency injection token` that allows you to load and initialize configuration information before the application starts. This ensures that necessary configuration data is available throughout the application as soon as it begins execution.\n\n## Using APP_INITIALIZER for Feature Toggles\n\nImplementing feature toggles in an Angular application using APP_INITIALIZER is a powerful technique. Feature toggles enable you to conditionally activate or deactivate specific features in your application based on configuration settings. This approach can be particularly useful for deploying features incrementally, performing A/B testing, or managing experimental features without the need to redeploy the entire application.\n\n## APP_INITIALIZER implementation ste--by-step in Angular application\n\n```js\nSteps to Implement Feature Toggles with APP_INITIALIZER\nCreate a Configuration Service:\n\nThis service will be responsible for fetching and storing the configuration data, including feature toggles.\nConfigure APP_INITIALIZER:\n\nUse APP_INITIALIZER to ensure that the configuration service loads the feature toggles before the application starts.\nUse Feature Toggles in Components:\n\nInject the configuration service into your components and use the feature toggles to conditionally display or hide features.\n\nNow, we can efficiently manage feature toggles in your Angular application, ensuring that features are enabled or disabled based on configuration settings loaded during the app initialization phase.\n```\n\n---\n\n## Development server\n\nRun `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.\n\n## Code scaffolding\n\nRun `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.\n\n## Build\n\nRun `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.\n\n## Running unit tests\n\nUnit tests are written using Jasmine and executed with Karma.\n\nRun `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).\n\n## Running end-to-end tests\n\nRun `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).\n\n## Further help\n\nTo get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).\n\n---\n\n### :100: \u003ci\u003eThanks!\u003c/i\u003e\n#### Now, don't be an stranger. Let's stay in touch!\n\n\u003ca href=\"https://github.com/leolanese\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n  \u003cimg src=\"https://scastiel.dev/api/image/leolanese?dark\u0026removeLink\" alt=\"leolanese’s GitHub image\" width=\"600\" height=\"314\" /\u003e\n\u003c/a\u003e\n\n##### :radio_button: Linkedin: \u003ca href=\"https://www.linkedin.com/in/leolanese/\" target=\"_blank\"\u003eLeoLanese\u003c/a\u003e\n##### :radio_button: Twitter: \u003ca href=\"https://twitter.com/LeoLanese\" target=\"_blank\"\u003e@LeoLanese\u003c/a\u003e\n##### :radio_button: Portfolio: \u003ca href=\"https://www.leolanese.com\" target=\"_blank\"\u003ewww.leolanese.com\u003c/a\u003e\n##### :radio_button: DEV.to: \u003ca href=\"https://www.dev.to/leolanese\" target=\"_blank\"\u003edev.to/leolanese\u003c/a\u003e\n##### :radio_button: Blog: \u003ca href=\"https://www.leolanese.com/blog\" target=\"_blank\"\u003eleolanese.com/blog\u003c/a\u003e\n##### :radio_button: Questions / Suggestion / Recommendation: developer@leolanese.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleolanese%2Fangular-feature-flag","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleolanese%2Fangular-feature-flag","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleolanese%2Fangular-feature-flag/lists"}