Inspecting a component instance
To explore our application programmatically at runtime, we often need a reference to an active component instance. Once we have a component reference, we can change bound properties and call event handlers or other methods.
However, first, we need a reference to either a directive instance or a DOM element with an attached component. Using the Elements tab of our browser developer tools, we can pick a DOM element and the developer tools will store a reference in the global $0 variable. Alternatively, we can use document.querySelector, or any other DOM querying or traversing API.
Say we have a component that generates random numbers, as seen in the following figure:
Figure 9.1 – A component for generating a random number
It has a component model as seen in the following code block:
import { Component } from '@angular/core';
@Component({
selector: 'app-random-number',
...
