🕵️ An angular library that lets you inspect and change Angular component properties
An angular library that lets you inspect and change Angular 9+ component properties
This library supports Angular 9+ projects and should only be installed using Angular CLI.
ng add @ngneat/inspector
Above command will do following for you:
environmentsfrom
../environments/environment.tsin projects root module. This can be skipped with
--skipImport.
InspectorModulefrom
@ngneat/inspectorin your project's root module's
importssection. This can be skipped with
--skipImport.
👉 Please note: @ngneat/inspector is a debugging tool and it helps you to develop faster. So, it shouldn't be part of your production deployment. When you install it using
ng add @ngneat/inspectorit is already taken care for you, as it writes import statement like this:imports: [environment.production ? [] : InspectorModule.forRoot()]
Updatebutton to see the effect
Emitbutton.
When you ran
ng add @ngneat/inspector, it added below statement in your imports array:
imports: [environment.production ? [] : InspectorModule.forRoot()]
Now, you can pass below config options to change inspector behavior in the
.forRoot()method, like:
InspectorModule.forRoot({ zIndex: 100000000 }).
All the options are optional.:
| Option | Type | Description | | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | enabled |
boolean| Enable or disable the inspector
true| | zIndex |
number| Gives the CSS
z-indexto inspector host element. Useful in-case it's not visible by default.
100000000| | outline |
InspectorConfigOutline
{
color?: string;
width?: string;
style?: string;
}| Applies style to outline, when you're hovering over elements after starting inspector.
{
color: '#ad1fe3',
width: '2px',
style: 'solid'
}| | position |
InspectorConfigPosition
{
top?: string;
right?: string;
bottom?: string;
left?: string;
}| Applies CSS Style position co-ordinates to inspector host element. Please note inspector host element has
position: fixedfor better usability.
{
top: '20px',
right: '20px'
}| | keyCombo |
string| Key combination pattern to start, stop and restart inspecting. Based on tinykeys keybinding syntax. You can disable this by setting
enableKeyComboto
false.
Shift+I| | closeOnEsc |
boolean| Close/Stop inspector when escape key is pressed.
true| | enableKeyCombo |
boolean| Enable keyboard shortcut to open inspector. You can change the keybindings using
keyCombooptions.
true| | hideNonSupportedProps |
boolean| This hides non-supported types from selector. Only
string,
number,
booleanand
objectare supported as of now.
true| | filterProps |
RegExp| A regular expression to filter out properties.
Thanks goes to these wonderful people (emoji key):
Dharmen Shah 💻 🖋 🤔 🚧 |
Netanel Basal 🐛 🖋 📖 🤔 🧑🏫 |
This project follows the all-contributors specification. Contributions of any kind welcome!
Icons made by Freepik from www.flaticon.com