Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alfredoperez/ngx-dev-toolbar
A powerful development toolbar for Angular applications to improve your developer productivity directly in the browser.
https://github.com/alfredoperez/ngx-dev-toolbar
angular angular-library dev-tools developer-tools development frontend typescript web-dev web-development
Last synced: 4 days ago
JSON representation
A powerful development toolbar for Angular applications to improve your developer productivity directly in the browser.
- Host: GitHub
- URL: https://github.com/alfredoperez/ngx-dev-toolbar
- Owner: alfredoperez
- License: mit
- Created: 2024-12-21T23:37:47.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2025-01-20T18:10:43.000Z (11 days ago)
- Last Synced: 2025-01-20T18:35:33.300Z (11 days ago)
- Topics: angular, angular-library, dev-tools, developer-tools, development, frontend, typescript, web-dev, web-development
- Language: TypeScript
- Homepage: https://alfredoperez.github.io/ngx-dev-toolbar/
- Size: 35.3 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - ngx-dev-toolbar - A powerful development toolbar for Angular applications to improve your developer productivity directly in the browser. (Table of contents / Angular)
- trackawesomelist - ngx-dev-toolbar (⭐6) - A powerful development toolbar for Angular applications to improve your developer productivity directly in the browser. (Recently Updated / [Jan 30, 2025](/content/2025/01/30/README.md))
README
# Angular Dev Toolbar
[](https://www.npmjs.com/package/ngx-dev-toolbar)
[](https://www.npmjs.com/package/ngx-dev-toolbar)
[](https://github.com/yourusername/ngx-dev-toolbar/blob/main/LICENSE)
[](https://angular.io/)
[](https://github.com/alfredoperez/ngx-dev-toolbar)
A powerful development toolbar for Angular applications that helps developers to interact with the application in a more efficient way.
## ✨ Why ngx-dev-toolbar?
🚥
Toggle feature flags without backend changes
🌍
Switch languages instantly
🎨
Switch themes on the fly
👤
Change user sessions effortlessly
🔄
Mock network requests in real-time
No more context switching or backend dependencies - everything you need is right in your browser!
## 🎯 Features
### 📦 Available Tools
- Feature Flags
- Language Switcher
- Themes `Coming Soon`
- User Session `Coming Soon`
- Network Requests Mocker `Coming Soon`
### 🛠️ Extensible
- Create custom tools
- Add your own functionality
### 🔒 Production Ready
- Hidden by default in production
- Zero production impact
- Secure implementation
### 💾 Persistent State
- Settings persist across reloads
- Import/Export configuration `Coming Soon`
## 📱 Quick Start
1. Installation
```bash
npm install ngx-dev-toolbar --save-dev
```
2. Import Component
```typescript
import { DevToolbarComponent } from 'ngx-dev-toolbar';
@Component({
imports: [DevToolbarComponent],
template: ` `,
})
export class AppComponent {}
```
## Available Tools
The tools come with a default implementation, but you can create your own tools and add them to the toolbar.
They have a service that you can use to interact with them.
### Feature Flags
#### Configuration
In order to use the feature flags tool, you need to import the `DevToolbarFeatureFlagService` and inject it in your component.
Then you just need to call the `setAvailableOptions` method with the available feature flags that can come from your backend or a third party service.
```typescript
import { DevToolbarFeatureFlagService } from 'ngx-dev-toolbar';
import { inject } from '@angular/core';
@Component({
// ... component decorator
})
export class AppComponent {
private featureFlagsService = inject(DevToolbarFeatureFlagService);
constructor() {
// Set available feature flags
this.featureFlagsService.setAvailableOptions([
{ id: 'darkMode', name: 'Dark Mode' },
{ id: 'betaFeatures', name: 'Beta Features' },
{ id: 'experimentalUI', name: 'Experimental UI' },
]);
}
}
```
Once it is added you should see them in the Feature Flags tool in the Angular Dev Toolbar.
#### Usage
```typescript
@Component({
// ... component decorator
})
export class FeatureComponent {
private featureFlagsService = inject(DevToolbarFeatureFlagService);
ngOnInit() {
this.featureFlagsService.getForcedValues().subscribe((forcedFlags) => {
const isDarkMode = forcedFlags.some((flag) => flag.id === 'darkMode');
// Apply dark mode logic
});
}
}
```
#### Dev Toolbar Interface
[Screenshot placeholder showing the feature flags interface in the dev toolbar]
### Language Switcher
#### Configuration
```typescript
import { DevToolbarLanguageService } from 'ngx-dev-toolbar';
import { inject } from '@angular/core';
@Component({
// ... component decorator
})
export class AppComponent {
private languageService = inject(DevToolbarLanguageService);
constructor() {
// Set available languages
this.languageService.setAvailableOptions([
{ code: 'en', name: 'English' },
{ code: 'es', name: 'Spanish' },
{ code: 'fr', name: 'French' },
]);
}
}
```
#### Usage
```typescript
@Component({
// ... component decorator
})
export class TranslatedComponent {
private languageService = inject(DevToolbarLanguageService);
ngOnInit() {
this.languageService.getForcedValues().subscribe(([selectedLang]) => {
// Update component's language
this.currentLanguage = selectedLang.code;
this.loadTranslations();
});
}
}
```
## Contributing
We welcome contributions! Please see our [contributing guidelines](https://github.com/alfredoperez/ngx-dev-toolbar/blob/main/CONTRIBUTING.md) for details.
## License
This project is licensed under the MIT License - see the [LICENSE](https://github.com/alfredoperez/ngx-dev-toolbar/blob/main/LICENSE) file for details.
## Support
## 🌟 Stay Connected
[](https://www.linkedin.com/in/alfredo-perez/)
[](https://bsky.app/profile/alfredo-perez.bsky.social)
[](https://github.com/alfredoperez/ngx-dev-toolbar)
Built with ❤️ using Nx