Debug Angular 9: Interacting with Components

The Angular 9 Ivy runtime offers a new ng object for debugging Angular 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".

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

// 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 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.

// 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.

// 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

// 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

// 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.

// Apply change detection
ng.applyChanges(heroComp)

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.

You can grab these great new Angular 9 tools here, too

1. VS Code editor
2. Angular Essentials Extension for VS Code
3. Angular Language Service for VS Code