The first visible view in Augury is the Component Tree, which shows loaded components. Selecting a component within the tree highlights the component's template within the browser. At the same time, additional information about the selected component is presented on the right side in the Properties tab. Let's select DataTableCrudComponent:

You see all the internal properties, inputs, and outputs. All the properties are editable. The next screenshot shows the properties of the Dialog component. The output property visibleChange is an event emitter. We can trigger the event emitter by setting the value to true and clicking on the button Emit. In response, the dialog becomes visible:

Next to the Properties tab is the Injector Graph, which displays the dependencies of components and services. If we select the DataTable component, the dependency of the DataTable and its ancestry chain to the root injector will be shown:

The circle symbols for services need to be clarified. The hollow red circle means the service is not provided by the component. It is provided from an ancestor in the dependency tree. A dashed blue line shows exactly where the service comes from. In our case, all services are provided by the root injector--the main module declaration in app.module.ts. The filled red circle means the service is being injected and registered in the same component.

The Router Tree gives you a tree view of all the routes in your application. You can explore which routes come from which parts of the application. We will skip the appropriate screenshot. The next tab, NgModules, lists all the modules in the application, along with the modules' imports, exports, providers, and declarations. An insight into NgModules gives the complexity and size of the available modules: