Angular Component Overview
Item media 2 screenshot
Item media 1 screenshot
Item media 2 screenshot
Item media 1 screenshot
Item media 1 screenshot
Item media 2 screenshot

Overview

This browser extension allows you to easily visualize the component tree of an Angular application, making it easy to understand…

This browser extension allows you to easily visualize the component tree of an Angular application, making it easy to understand the structure and relationships of the components. Activate the extension and select which components to outline, either selectively by component name (or by component selector) or component family identified by a prefix (e.g. material components: mat-). When it comes to code review, Angular Outliner can be a powerful tool. It allows developers to quickly demonstrate and show the component hierarchy of the new code increment. This makes code reviews more efficient and effective, saving you time and effort. ______________________________________________________________________________________________ Support me: buymeacoffee.com/felixff ______________________________________________________________________________________________ Chrome extension that helps to visualize application components by drawing a frame around them. You can choose between component namespaces defined by prefixes (e.g. `app` - application components, `mat` - material components, etc.) or specific components. The extension also shows component instances count. ______________________________________________________________________________________________ Update 2.5 * UI simplification Update 2.4 * Outline component on hover * Component graph preview Update 2.3: * Improved component name positioning when multiple components occupy the same space, so labels do not overlap. * Improved UX when scrolling - components are redrawn.

5 out of 52 ratings

Google doesn't verify reviews. Learn more about results and reviews.

Review's profile picture

Samiullah KhanDec 9, 2022

I does the job of giving you the best overivew of your component. It also detects if third party library is used, for instance you can easily toggle the angular material components. I really like that feature. Further more there is filtering, sorting and tracing.

3 out of 3 found this helpful
Review's profile picture

Felix FatkaDec 22, 2020

Nice.

1 person found this review to be helpful

Details

  • Version
    2.5
  • Updated
    March 17, 2024
  • Offered by
    angular.outliner
  • Size
    874KiB
  • Languages
    English (United States)
  • Developer
    Cedr Jesenice 25242 Czechia
    Email
    angular.outliner@gmail.com
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

The developer has disclosed that it will not collect or use your data.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes

Support

Related

AngularContext

0.0(0)

Angular context inspector

Angular state inspector

4.7(62)

Helps you debug Angular component state. Supports Angular 1/2+/Ivy!

SB Angular Inspector

5.0(2)

Angular Inspector for Angular 9+ (Ivy)

ngprobe

5.0(1)

Chrome Devetools Elements sidebar to displays Angular Component (pre-Ivy and Ivy) and AngularJS Scope for selected element i.e. $0

Angular DevTools

3.9(154)

Angular DevTools extends Chrome DevTools adding Angular specific debugging and profiling capabilities.

Augury Extension

3.0(2)

Useful app.augury.com features

RxJS Insights

3.3(3)

See through the observables

Angular Inspector

4.4(8)

Detect Angular apps and javascript libraries

ng-inspect for AngularJS

4.4(88)

Helps you in debugging AngularJS applications. Extends the elements panel in devtools to display scope properties.

Learn-RxJs

0.0(0)

A browser extension that will remind and teach you an RxJs operator a day.

Angular Gauntlets

5.0(4)

Add shortcuts to easily debug your Angular application.

Angular Profiler

3.0(2)

Angular Profiler is a developer tool to power-up Angular development workflow by providing a series of debugging tools.

AngularContext

0.0(0)

Angular context inspector

Angular state inspector

4.7(62)

Helps you debug Angular component state. Supports Angular 1/2+/Ivy!

SB Angular Inspector

5.0(2)

Angular Inspector for Angular 9+ (Ivy)

ngprobe

5.0(1)

Chrome Devetools Elements sidebar to displays Angular Component (pre-Ivy and Ivy) and AngularJS Scope for selected element i.e. $0

Angular DevTools

3.9(154)

Angular DevTools extends Chrome DevTools adding Angular specific debugging and profiling capabilities.

Augury Extension

3.0(2)

Useful app.augury.com features

RxJS Insights

3.3(3)

See through the observables

Angular Inspector

4.4(8)

Detect Angular apps and javascript libraries

Google apps