Angular Component Finder

About

Short Description

Inspect Angular components using custom selector prefixes with real-time highlighting and exportable reports.

Full Description

Angular Component Finder is a lightweight developer tool that helps you quickly inspect Angular components used on any Angular web application.

The extension scans the current page and lists Angular component selectors such as app-, lib-, ui-, and feature-. You can also add your own custom prefixes to detect project-specific components.

Developers can easily identify the structure of Angular applications and highlight components directly on the page.

This tool is useful for Angular developers, UI debugging, component exploration, and understanding large Angular application structures.


🔍 Features

• Detect Angular component selectors using default prefixes (app-, lib-, ui-, feature-)
• Add custom prefixes to support project-specific component naming
• Remove prefixes easily from the list
• Real-time scanning with automatic updates on DOM changes
• Hover over a selector to highlight the element in the webpage
• Works with dynamically loaded Angular components
• Export component lists as TXT or styled HTML reports
• Includes a Refresh button to manually rescan the current page
• Clean and simple side panel UI
• Lightweight and developer friendly
• Runs directly from the Chrome Side Panel


✨ New in this version

• Custom prefix support for flexible component detection
• Ability to add and remove prefixes dynamically
• Improved UI for prefix management
• Enhanced HTML export with styled layout
• Better performance and stability


🎯 Use Cases

• Debug Angular UI quickly
• Explore unknown Angular codebases
• Identify reusable components
• Improve frontend development workflow


🛠 How to Install and Use

Step 1 – Install the Extension

Open the Chrome Web Store.

Search for Angular Component Finder.

Click Add to Chrome.

Confirm by clicking Add Extension.

The extension will now be installed in your browser.


Step 2 – Pin the Extension

Click the Extensions icon (puzzle icon) in the Chrome toolbar.

Find Angular Component Finder in the list.

Click the Pin icon next to the extension.

The extension icon will now appear in your Chrome toolbar.


Step 3 – Open an Angular Website

Open any website built using Angular.

Examples:

http://localhost:4200

or any Angular-based application.


Step 4 – Open the Side Panel

Click the Angular Component Finder icon in the Chrome toolbar.

The side panel will open on the right side of the browser.

The extension will automatically scan the page.


Step 5 – View Angular Components

Inside the side panel you will see a list of Angular components such as:

app-root  
app-home  
app-topbar  
lib-slider  
lib-card  

These are the Angular component selectors used on the current page.


Step 6 – Highlight Components

Move your mouse over a selector in the list.

The corresponding element will be highlighted in the webpage.

This helps quickly locate components in complex layouts.


Step 7 – Use Custom Prefixes (NEW)

You can add your own prefixes to detect custom components.

Example:

kendo  
dashboard-  

This allows the extension to work with any Angular project naming style.


Step 8 – Refresh the Component List

If the list does not update automatically:

Click the Refresh button in the side panel.

This will rescan the current page and update the component list.


Step 9 – Export Component List

You can save the detected components:

• Click Save as TXT to download a text file  
• Click Save as HTML to download a styled HTML report  

The exported file will include the page URL and detected components.


⚠️ Troubleshooting

If the extension does not detect components or the list appears empty:

• Make sure the webpage is an Angular application  
• Add the correct prefix used in the project  
• Click the Refresh button to rescan  
• Refresh the webpage and reopen the side panel if needed  
• Ensure the extension is enabled and pinned in Chrome  


🔒 Privacy Policy

This extension does not collect, store, or transmit any personal data.

All processing happens locally in the user's browser. The extension only reads the webpage structure to identify Angular component selectors.