An angular library that lets you inspect and change Angular 9+ component properties

Features <!-- omit in toc -->

• ✅ Inspect Angular 9+ components on the fly
• ✅ Change component properties without touching the code
• ✅ Simulate Angular events
• ✅ See the results in realtime

Table of Contents <!-- omit in toc -->

• Installation
  • Angular CLI
• Usage
• Options
• Contributors ✨

Installation

This library supports Angular 9+ projects and should only be installed using Angular CLI.

Angular CLI

ng add @ngneat/inspector

Above command will do following for you:

1. Add and install following dev dependencies:
   1. @ngneat/inspector
   2. ace-builds
   3. tinykeys
2. Import

   environments

   from

   ../environments/environment.ts

   in projects root module. This can be skipped with

   --skipImport

   .
3. Import

   InspectorModule

   from

   @ngneat/inspector

   in your project's root module's

   imports

   section. 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/inspector

it is already taken care for you, as it writes import statement like this:

imports: [environment.production ? [] : InspectorModule.forRoot()]

Usage

1. Click on Inspector button
2. Then hover over the component which you want to inspect, you will see purple colored outline on the currently hovered element
   
3. Click on the element and inspector will expand with component's details like name, selector, properties (with inputs), and outputs (if any)
   
4. You can change the property/outputs from select
   
5. Data types: Below are the supported data types and how it will render in inspector:
   1. String - input[type=text]
      
   2. Number - input[type=text]
      
   3. Boolean - input[type=checkbox]
      
   4. Object - ace-editor
      
6. Properties - To update any property, after updating value, you will need to click on

   Update

   button to see the effect
   
7. Outputs
   
   1. To call the output, you will need to click on

      Emit

      button.
   2. By default, 1 argument with string type will be shown. You can change the type by change value from type select.
   3. You can also add/remove arguments by clicking on respective buttons <!-- markdownlint-restore -->

Options

When you ran

ng add @ngneat/inspector

imports: [environment.production ? [] : InspectorModule.forRoot()]

Now, you can pass below config options to change inspector behavior in the

.forRoot()

InspectorModule.forRoot({ zIndex: 100000000 })

All the options are optional.:

| Option | Type | Description | | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | enabled |

boolean

true

number

z-index

100000000

InspectorConfigOutline

{

color?: string;

width?: string;

style?: string;

}

{

color: '#ad1fe3',

width: '2px',

style: 'solid'

}

InspectorConfigPosition

{

top?: string;

right?: string;

bottom?: string;

left?: string;

}

position: fixed

{

top: '20px',

right: '20px'

}

string

enableKeyCombo

false

Shift+I

boolean

true

boolean

keyCombo

true

boolean

string

number

boolean

object

true

RegExp

Contributors ✨

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