{{announcement.body}}
{{announcement.title}}

Debugging Made Easy With This New Feature in Angular 9

DZone 's Guide to

Debugging Made Easy With This New Feature in Angular 9

In this article, we are going to walk through some frequently required debugging options that are available by default in an Angular 9 CLI application.

· Performance Zone ·
Free Resource

"If debugging is the process of removing software bugs, then programming must be the process of putting them in."

Edsger W. Dijkstra

The latest version Angular 9 includes a lot of major improvements, including the Ivy compiler and the reduction of bundle size using tree-shaking. You can explore the features of Angular 9 in this blog post.

The new Angular 9 enhances the way we debug and interact with components in development mode. With this update, you can:

  • Easily access the instance of components, pipes, or services.
  • Call methods, inspect any object values or even change them manually with the help of an instance.
  • Trigger the Angular change detection to reflect the changes in UI.

These capabilities are possible with the globally exposed ng object in the browser developer console.

Before going further, to more easily follow along with this blog post, we encourage you to create a new application using the latest version of Angular CLI.

In this article, we are going to walk through some frequently required debugging options that are available by default in an Angular 9 CLI application.

Let's dive in!

Getting the Angular Global Instance

The Angular team has exposed the global object ng, which is a lifesaver that makes the debugging process much easier. Follow these steps to get access to this global instance:

  1. Run the following command to launch the application locally at http://localhost:4200/:
    ng serve --open 
  2. Open the browser developer console or press F12.
  3. In the Console tab, type, and press Enter. All the default functions of the global ng object will be listed as shown in the following screenshot.

You can play with Angular components using the exposed functions. Now, let's have a look at it in action with the default Angular CLI application.

Getting the Angular Component Instance

The method ng.getComponent is used to retrieve the component instance associated with the given DOM element. Follow these steps to get an underlying Angular component:

  1. Open the developer console and navigate to the Elements tab view.
  2. Select the element <app-root>, which will expose the $0 variable in the JavaScript console.
  3. Now, write the following line of code in the JavaScript console:

 ng.getComponent($0)

Now you can see the magic as shown in the following GIF.

Interacting With the Angular Component

Now, the <app-root> Angular component instance is available along with all the variables, methods, and injected services, including the private methods and variables.

Interaction with the Angular component is easier using this instance. Run the following code to change the title of the component:

ng.getComponent($0).title = "Custom Title"

Unfortunately, no change can be seen in the UI part. This is because we didn't notify Angular that the title of the component is changed from the JavaScript. Unless we notify the changes to Angular, they won't be reflected in the UI.

A quick solution to overcome this is to trigger the Angular change detection manually. Angular has a method ng.applyChanges(component) to trigger the change detection.

ng.applyChanges($0)

Now you will see the title updated to Custom Title.

In a similar way, you can call any method exposed in the ng object. All the available functions in the ng object are listed in the table below, reproduced from the Angular documentation at https://angular.io/api/core/global. You can refer to that documentation for further details.

ng.getContext

If inside an embedded view (e.g., * ngIf or * ngFor), retrieves the context of the embedded view that the element is part of. Otherwise retrieves the instance of the component whose view owns the element (in this case, the result is the same as calling getOwningComponent).

ng.getInjector

Retrieves an Injector associated with an element, component, or directive instance.

Interacting With Syncfusion Angular component

In this section, we are going to integrate the Syncfusion DatePicker Angular component with the Angular CLI application and interact with it.

  1. Follow the steps in the following user guide to integrating the Syncfusion DatePicker Angular component:
    Getting Started with Syncfusion Angular DatePicker Component

    Note: For simplicity, use the following code in the app.component.ts file:

    [app.component.ts]
    Java
     




    xxxxxxxxxx
    1
    11


     
    1
    import { Component } from '@angular/core';
    2
     
                
    3
    @Component({
    4
      selector: 'app-root',
    5
      templateUrl: './app.component.html',
    6
      styleUrls: ['./app.component.css']
    7
    })
    8
    export class AppComponent {
    9
      title = 'angular-debugging';
    10
      date: Date = new Date();
    11
    }


    [app.component.html]
    Include the following code next to the highlighted card section.

    Java
     




    xxxxxxxxxx
    1


     
    1
    <!-- Highlight Card -->
    2
      <div class="card highlight-card card-small">
    3
     -------
    4
     -------
    5
     -------
    6
      </div>
    7
     
                
    8
      <ejs-datepicker [value]='date' placeholder='Enter date'></ejs-datepicker>


  2. Now, the Angular CLI will look like the following screenshot.
  3. Now, access the DatePicker component and change the date value using the <app-root>element in the developer console. The following code example does this:
    Java
     




    xxxxxxxxxx
    1


     
    1
    ng.getComponent($0).date = new Date("1/1/2021")
    2
    ng.applyChanges($0)


Don't forget to call the method ng.applyChanges(component) to see the changes in the UI.

Conclusion

I hope you now have a clear idea of how accessing the Angular global instance in the developer console makes debugging web applications easier.

Topics:
angular 9, call methods, performance, ui

Published at DZone with permission of Karthick T . See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}