ngx-dev-toolbar 0.0.2-4 → 0.0.2-6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +254 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,7 +1,257 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Angular Dev Toolbar
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
<div align="center">
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
[](https://www.npmjs.com/package/ngx-dev-toolbar)
|
|
6
|
+
[](https://www.npmjs.com/package/ngx-dev-toolbar)
|
|
7
|
+
[](https://github.com/yourusername/ngx-dev-toolbar/blob/main/LICENSE)
|
|
8
|
+
[](https://angular.io/)
|
|
9
|
+
[](https://github.com/alfredoperez/ngx-dev-toolbar)
|
|
6
10
|
|
|
7
|
-
|
|
11
|
+
<h3>A powerful development toolbar for Angular applications that helps developers to interact with the application in a more efficient way.</h3>
|
|
12
|
+
|
|
13
|
+
<p align="center">
|
|
14
|
+
<img src="../../apps/documentation/src/assets/demos/feature-flags-demo.gif" alt="Dev Toolbar Demo" width="600px" />
|
|
15
|
+
</p>
|
|
16
|
+
|
|
17
|
+
</div>
|
|
18
|
+
|
|
19
|
+
## ✨ Why ngx-dev-toolbar?
|
|
20
|
+
|
|
21
|
+
<div align="center">
|
|
22
|
+
<table>
|
|
23
|
+
<tr>
|
|
24
|
+
<td align="center">🚥</td>
|
|
25
|
+
<td>Toggle feature flags without backend changes</td>
|
|
26
|
+
</tr>
|
|
27
|
+
<td align="center">🌍</td>
|
|
28
|
+
<td>Switch languages instantly</td>
|
|
29
|
+
</tr>
|
|
30
|
+
<td align="center">🎨</td>
|
|
31
|
+
<td>Switch themes on the fly</td>
|
|
32
|
+
</tr>
|
|
33
|
+
<td align="center">👤</td>
|
|
34
|
+
<td>Change user sessions effortlessly</td>
|
|
35
|
+
</tr>
|
|
36
|
+
<td align="center">🔄</td>
|
|
37
|
+
<td>Mock network requests in real-time</td>
|
|
38
|
+
</tr>
|
|
39
|
+
</table>
|
|
40
|
+
</div>
|
|
41
|
+
|
|
42
|
+
No more context switching or backend dependencies - everything you need is right in your browser!
|
|
43
|
+
|
|
44
|
+
## 🎯 Features
|
|
45
|
+
|
|
46
|
+
<div class="feature-grid">
|
|
47
|
+
|
|
48
|
+
### 📦 Available Tools
|
|
49
|
+
|
|
50
|
+
- Feature Flags
|
|
51
|
+
- Language Switcher
|
|
52
|
+
- Themes `Coming Soon`
|
|
53
|
+
- User Session `Coming Soon`
|
|
54
|
+
- Network Requests Mocker `Coming Soon`
|
|
55
|
+
|
|
56
|
+
### 🛠️ Extensible
|
|
57
|
+
|
|
58
|
+
- Create custom tools
|
|
59
|
+
- Add your own functionality
|
|
60
|
+
|
|
61
|
+
### 🔒 Production Ready
|
|
62
|
+
|
|
63
|
+
- Hidden by default in production
|
|
64
|
+
- Zero production impact
|
|
65
|
+
- Secure implementation
|
|
66
|
+
|
|
67
|
+
### 💾 Persistent State
|
|
68
|
+
|
|
69
|
+
- Settings persist across reloads
|
|
70
|
+
- Import/Export configuration `Coming Soon`
|
|
71
|
+
|
|
72
|
+
</div>
|
|
73
|
+
|
|
74
|
+
## 📱 Quick Start
|
|
75
|
+
|
|
76
|
+
<details>
|
|
77
|
+
<summary><b>1. Installation</b></summary>
|
|
78
|
+
|
|
79
|
+
```bash
|
|
80
|
+
npm install ngx-dev-toolbar --save-dev
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
</details>
|
|
84
|
+
|
|
85
|
+
<details>
|
|
86
|
+
<summary><b>2. Import Component</b></summary>
|
|
87
|
+
|
|
88
|
+
```typescript
|
|
89
|
+
import { DevToolbarComponent } from 'ngx-dev-toolbar';
|
|
90
|
+
|
|
91
|
+
@Component({
|
|
92
|
+
imports: [DevToolbarComponent],
|
|
93
|
+
template: ` <ndt-dev-toolbar> </ndt-dev-toolbar>`,
|
|
94
|
+
})
|
|
95
|
+
export class AppComponent {}
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
</details>
|
|
99
|
+
|
|
100
|
+
## Available Tools
|
|
101
|
+
|
|
102
|
+
The tools come with a default implementation, but you can create your own tools and add them to the toolbar.
|
|
103
|
+
|
|
104
|
+
They have a service that you can use to interact with them.
|
|
105
|
+
|
|
106
|
+
### Feature Flags
|
|
107
|
+
|
|
108
|
+
#### Configuration
|
|
109
|
+
|
|
110
|
+
In order to use the feature flags tool, you need to import the `DevToolbarFeatureFlagService` and inject it in your component.
|
|
111
|
+
|
|
112
|
+
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.
|
|
113
|
+
|
|
114
|
+
```typescript
|
|
115
|
+
import { DevToolbarFeatureFlagService } from 'ngx-dev-toolbar';
|
|
116
|
+
import { inject } from '@angular/core';
|
|
117
|
+
|
|
118
|
+
@Component({
|
|
119
|
+
// ... component decorator
|
|
120
|
+
})
|
|
121
|
+
export class AppComponent {
|
|
122
|
+
private featureFlagsService = inject(DevToolbarFeatureFlagService);
|
|
123
|
+
|
|
124
|
+
constructor() {
|
|
125
|
+
// Set available feature flags
|
|
126
|
+
this.featureFlagsService.setAvailableOptions([
|
|
127
|
+
{ id: 'darkMode', name: 'Dark Mode' },
|
|
128
|
+
{ id: 'betaFeatures', name: 'Beta Features' },
|
|
129
|
+
{ id: 'experimentalUI', name: 'Experimental UI' },
|
|
130
|
+
]);
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
Once it is added you should see them in the Feature Flags tool in the Angular Dev Toolbar.
|
|
136
|
+
|
|
137
|
+
|
|
138
|
+
|
|
139
|
+
#### Usage
|
|
140
|
+
|
|
141
|
+
```typescript
|
|
142
|
+
@Component({
|
|
143
|
+
// ... component decorator
|
|
144
|
+
})
|
|
145
|
+
export class FeatureComponent {
|
|
146
|
+
private featureFlagsService = inject(DevToolbarFeatureFlagService);
|
|
147
|
+
|
|
148
|
+
ngOnInit() {
|
|
149
|
+
this.featureFlagsService.getForcedValues().subscribe((forcedFlags) => {
|
|
150
|
+
const isDarkMode = forcedFlags.some((flag) => flag.id === 'darkMode');
|
|
151
|
+
// Apply dark mode logic
|
|
152
|
+
});
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
#### Dev Toolbar Interface
|
|
158
|
+
|
|
159
|
+
[Screenshot placeholder showing the feature flags interface in the dev toolbar]
|
|
160
|
+
|
|
161
|
+
### Language Switcher
|
|
162
|
+
|
|
163
|
+
#### Configuration
|
|
164
|
+
|
|
165
|
+
```typescript
|
|
166
|
+
import { DevToolbarLanguageService } from 'ngx-dev-toolbar';
|
|
167
|
+
import { inject } from '@angular/core';
|
|
168
|
+
|
|
169
|
+
@Component({
|
|
170
|
+
// ... component decorator
|
|
171
|
+
})
|
|
172
|
+
export class AppComponent {
|
|
173
|
+
private languageService = inject(DevToolbarLanguageService);
|
|
174
|
+
|
|
175
|
+
constructor() {
|
|
176
|
+
// Set available languages
|
|
177
|
+
this.languageService.setAvailableOptions([
|
|
178
|
+
{ code: 'en', name: 'English' },
|
|
179
|
+
{ code: 'es', name: 'Spanish' },
|
|
180
|
+
{ code: 'fr', name: 'French' },
|
|
181
|
+
]);
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
#### Usage
|
|
187
|
+
|
|
188
|
+
```typescript
|
|
189
|
+
@Component({
|
|
190
|
+
// ... component decorator
|
|
191
|
+
})
|
|
192
|
+
export class TranslatedComponent {
|
|
193
|
+
private languageService = inject(DevToolbarLanguageService);
|
|
194
|
+
|
|
195
|
+
ngOnInit() {
|
|
196
|
+
this.languageService.getForcedValues().subscribe(([selectedLang]) => {
|
|
197
|
+
// Update component's language
|
|
198
|
+
this.currentLanguage = selectedLang.code;
|
|
199
|
+
this.loadTranslations();
|
|
200
|
+
});
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
## Contributing
|
|
206
|
+
|
|
207
|
+
We welcome contributions! Please see our [contributing guidelines](https://github.com/alfredoperez/ngx-dev-toolbar/blob/main/CONTRIBUTING.md) for details.
|
|
208
|
+
|
|
209
|
+
## License
|
|
210
|
+
|
|
211
|
+
This project is licensed under the MIT License - see the [LICENSE](https://github.com/alfredoperez/ngx-dev-toolbar/blob/main/LICENSE) file for details.
|
|
212
|
+
|
|
213
|
+
## Support
|
|
214
|
+
|
|
215
|
+
<div align="center">
|
|
216
|
+
|
|
217
|
+
<table>
|
|
218
|
+
<tr>
|
|
219
|
+
<td align="center">
|
|
220
|
+
<a href="https://alfredoperez.github.io/ngx-dev-toolbar/">
|
|
221
|
+
📚
|
|
222
|
+
<br />
|
|
223
|
+
Documentation
|
|
224
|
+
</a>
|
|
225
|
+
</td>
|
|
226
|
+
<td align="center">
|
|
227
|
+
<a href="https://github.com/alfredoperez/ngx-dev-toolbar/issues">
|
|
228
|
+
🐛
|
|
229
|
+
<br />
|
|
230
|
+
Issue Tracker
|
|
231
|
+
</a>
|
|
232
|
+
</td>
|
|
233
|
+
<td align="center">
|
|
234
|
+
<a href="https://github.com/alfredoperez/ngx-dev-toolbar/discussions">
|
|
235
|
+
💬
|
|
236
|
+
<br />
|
|
237
|
+
Discussions
|
|
238
|
+
</a>
|
|
239
|
+
</td>
|
|
240
|
+
</tr>
|
|
241
|
+
</table>
|
|
242
|
+
|
|
243
|
+
</div>
|
|
244
|
+
|
|
245
|
+
## 🌟 Stay Connected
|
|
246
|
+
|
|
247
|
+
<div align="center">
|
|
248
|
+
|
|
249
|
+
[](https://www.linkedin.com/in/alfredo-perez/)
|
|
250
|
+
[](https://bsky.app/profile/alfredo-perez.bsky.social)
|
|
251
|
+
[](https://github.com/alfredoperez/ngx-dev-toolbar)
|
|
252
|
+
|
|
253
|
+
<hr />
|
|
254
|
+
|
|
255
|
+
<p>Built with ❤️ using <a href="https://nx.dev">Nx</a></p>
|
|
256
|
+
|
|
257
|
+
</div>
|