Debug Angular 9: Interacting with Components 
Tags: angular, webdev, javascript, html
Published: 2020-02-15 18:49:05

---
title: Debug Angular 9: Interacting with Components 
published: true
description: You can inspect, modify, and interact with components using the new Angular 9 Ivy runtime to debug your app!
tags: angular, webdev, javascript, html
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/0l9shajmnvb6w6pml81a.png
series: 'debugging angular 9'
canonical_url: https://johnpapa.net/debug-angular-9-interacting-with-components/
---

The Angular 9 Ivy runtime offers a new [`ng` object for debugging Angular](https://angular.io/api/core/global#entry-point-exports) apps, when you run in Dev mode.


## Inspect and Interact

Imagine that we have a parent component named `HeroesComponent` and a child component named `HeroDetailComponent`. We select a hero in the parent and we see the child. Now if we want modify the hero in the child and see when those changes get applied to the parent, we can do that through debugging in the browser console.

We'll inspect the values step by step.

### 1 - Select the 5th hero 

This will be Aslaug, the Warrior Queen.


### 2 - Select the input element 

Using the Chrome development tools, select the input element for "Aslaug".


![Selecting the input element for 'Aslaug'](https://dev-to-uploads.s3.amazonaws.com/i/suacx92f6erqi2mk8x9d.png)

### 3 - Get references to the components

Set a reference to the `HeroDetailComponent` and its parent, `HeroesComponent` by entering the following commands into the Chrome developer tools console

```javascript
// get the HeroDetailComponent
heroComp = ng.getContext($0)

// get the HeroesComponent
heroesComp = ng.getOwningComponent(heroComp)
```

Chrome developer tools expose `$0` to identify the selected element. Then we use the [`ng` debugging API](https://angular.io/api/core/global) to get the context of the selected element using `ng.getContext($0)`. The context gets the `HeroesDetailComponent` for us. 

We also want to get a reference to the parent component, `HeroesComponent`, so we can make sure the values we change are only sent from the child to the parent when the user presses the save button. We use the `ng.getOwningComponent(heroComp)` to grab this reference.

### 4 - Modify the component

Let's modify the selected hero's name.

```javascript
// Change the hero's name
heroComp.editingHero.name = 'Madelyn'
```

We modify the component's model. No changes are visible in the browser (yet).

### 5 - Compare the values

Now let's compare the hero's name in the child and parent components.

```javascript
// Compare the hero in the child an parent components
heroComp.editingHero.name === heroesComp.heroes[4].name
// Should be false
```

We compare the parent and child components' models' values. These should be different, since we have modified the child and have not yet sent those changes to the parent.

### 6 - Save the changes

Let's save the changes to the hero's name, by calling the child component's `saveHero()` function

```javascript
// Save the changes to the hero
heroComp.saveHero()
```

We call the `saveHero()` function, simulating a user pressing the save button. This sends the child component's Hero model to the parent, via an `EventEmitter`. Hmmm, no changes are visible in the browser (yet).

### 7 - Compare, Again

Once again, compare the hero's name in the child and parent components

```javascript
// Compare the hero in the child an parent components
heroComp.editingHero.name === heroesComp.heroes[4].name
// Should be true
```

We compare the values of the model in the child and parent components. This time they should be the same. But we notice that we still see the old values in the browser.

### 8 - Change Detection

Apply Angular's change detection.

```javascript
// Apply change detection
ng.applyChanges(heroComp)

```

![Applying Angular's Change Detection](https://media.giphy.com/media/iGLBo1HGlvNXiO6C5B/giphy.gif)

Now that we run the change detection, we see the changes update in the browser!


## Learn More

Pretty cool! This is just one of the new features in Angular 9. To learn more, check out this [article on 7 new features in Angular 9](https://auth0.com/blog/angular-9-whats-new/).

You can grab these great new Angular 9 tools here, too
1. [VS Code](https://code.visualstudio.com/?wt.mc_id=devto-blog-jopapa) editor
2. [Angular Essentials Extension](https://marketplace.visualstudio.com/items?itemName=johnpapa.angular-essentials&wt.mc_id=devto-blog-jopapa) for VS Code
3. [Angular Language Service](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template&wt.mc_id=devto-blog-jopapa) for VS Code