Angular Component Overview Chrome Extension

This extension is recommended for Angular developers. Its purpose is to make an idea how an Angular page is composed and which….
This extension is recommended for Angular developers. Its purpose is to make an idea how an Angular page is composed and which components are used.

It is not supposed to replace the official angular extension but to complement it.

The extension helps to visualise components on a page by outlining component boundaries by drawing a box around selected components and displaying component names. You can choose which components will be highlighted: either by a component family / namespace / prefix (application - app, material - mat, etc) or you can choose particular component from a list of components. The extension also shows components instances count on given page and the strategy (Default / OnPush).

Due to chrome restrictions, angular application must be started as follows:

* application must run on localhost, on port 4200 and the protocol must be http; example: `http://localhost:4200`

* the application must run in development mode so that Angular `ng` object is available in browser developer tools (https://stackoverflow.com/a/67686819).

The repo of this extension is here: https://github.com/felikf/angular-outliner

How to install Angular Component Overview chrome extension in chrome Browser

You can Follow the below Step By Step procedure to install the Angular Component Overview Chrome Extension to your Chrome Web browser.

• Step 1: Go to the Chrome webstore https://chrome.google.com/webstore or download the extension Angular Component Overview Chrome Extension Download from https://pluginsaddonsextensions.com
• Step 2: Now search for the Angular Component Overview in Chrome Webstore Search and click on the search button.
• Step 3: click on the Angular Component Overview Chrome Extension Link
• Step 4: in the next page click on the Add to Chrome button to Download and Install the Angular Component Overview extension for your Chrome Web browser .