New ways to debug components in Angular 9

https://pixabay.com/vectors/fly-swatter-flyswatter-fly-flap-bug-149265/

The stable version of Angular 9 released a few days back (6th Feb 2020) along with a hell lot of improvements, majorly the IVY compiler, smaller bundle size using tree-shaking and a lot more.

If you want to upgrade your Angular to 9th version, you can follow the instructions given here https://update.angular.io/.

One of another awesome feature that has been shipped with Angular 9 is the ways to debug the code or components in the development mode.

These improvements can speed up the development and ease a developers' life by the following points:

1. You can now grab an instance of your components, directives or pipes.
2. Since you get the instance of your component, you can manually call your methods, inspect any object values or even change them.
3. And once you change those and wants to see the changes, trigger the change detection cycle of Angular.

These all are possible using a variable ng available in the inspect mode.

Let’s take a look:

Once you are upgraded your application to Angular 9, open the Developers Console and type in ng and press enter:

New “ng” object in Angular 9

You will see various functions available on the ng method. Now, let’s try the simplest method i.e. ng.getComponent():

Consider this simplest component code we have:

This results in the following UI:

Simple page using Angular 9

Wait! What are those red highlights?

Let’s do it step by step:

1. Select the <app-dashboard> element from the Elements view in the Developers Console.
2. Selecting this will expose a variable $0 in the JavaScript Console.
3. Now, when you write the following lines in the JavaScript console, you will see the magic:

ng.getComponent($0)

Woah!

You will get a handle on the instance of your DashboardComponent created by Angular along with all the variables, functions and injected services including any private methods or private variables.

Now, all you have to do is, change the title of the component:

ng.getComponent($0).title = "My Dashboard"

Oops! Nothing happened?

This is obvious, because, no one notified Angular that something has changed in the JavaScript model. So unless you poke Angular, it won’t update the value. 😃

The quickest solution to trigger the Angular’s change detection cycle is to click anywhere in the UI (because Angular listens for this DOM interaction events and triggers its cycle).

The above solution (of clicking somewhere in the UI) is a workaround so to overcome this problem, Angular has provided another method to manually trigger the change detection cycle. So just write this:

ng.applyChanges($0)

TADAAAA!! You will see the updated title on the dashboard page.

In a similar fashion, you can call any method of your component. Let’s call the method alertFoo or goToFAQsPage :

ng.getComponent($0).alertFoo()
// or
ng.getComponent($0).goToFAQsPage()

Calling a method of a component from the console in Angular 9

Isn’t that cool? 😀

But please remember, if the method that you are supposed to call is also updating something in the Angular’s context, you need to again trigger the change detection cycle as explained above.

ng.getListeners($0) method is also quite useful to see any events that you are trying to debug on any element or component.

For example, you can see in the below image that a click event has been attached to the button which adds a new FAQ:

Another useful method to debug the correct component placement and hierarchy is ng.getOwningComponent($0) If you call this method with the reference of the above Add new FAQ button, you will get the first owning component of the button:

You will see that FaqListComponent is returned from the method call.

Another method ng.getRootComponents($0) is also helpful to figure out the topmost parent component of an element. Consider, we inspect the Edit button of an FAQ:

Now you can see the difference between ng.getOwningComponent & ng.getRootComponents

ng.getOwningComponent($0) gave us the MatRow component instance (which is an Angular Material component) while ng.getRootComponents($0) gave us the topmost parent component.

I think this is a good start for anybody to start using these methods, the Angular team has provided in the 9th version.

For other lists of methods available in ng, see it here https://angular.io/api/core/global

But again please note, these debugging methods are only available in the development mode so you won’t get these methods in a --prod build which calls enableProdMode() defined in main.ts file.

Want to see your amazing idea in action? Or want to join us? Connect us at https://www.wizpanda.com/