I am sure no one told you these Angular debug tips (Part 1)😱

I like debugging, even more when I open any application my browser debugging dev tool is also remain opened, and I am sure everyone and other is done to debug an application.

This is first part of articles to know more check Angular debug Part II.

Unfortunately, Angular is lacking with it application debug thing, so this article is aimed to provide you with the knowledge to become Angular debugging master ?🐱‍👤

“ Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it. ” — Brian Kernighan

From Angular 9 and onwards Angular exposes a namespace named ng which have some property to help developer to debug easily without much hassle and code changes for having console logs.

So without wasting much time, Let explore on debugger predefine method.

ng.getComponent

getComponent() get the instance associated with a given DOM element like <app-root>. Suppose a component have an element with id title-header and read property value. Then we can write following in browser console.

var titleHeader= document.querySelector(‘#title-header’);
var appComp = ng.getComponent(titleHeader);

or, get instance by node.

ng.getComponent($0)
ng.getComponent($0).title= "Welcome debugger";

ng.applyChanges

Regrettably, we cannot see change in the UI part. This is because we didn’t notify Angular that the title of the component is changed. Unless we notify the changes to Angular, it won’t be reflected in the UI.

A quick solution to overcome this is to trigger the Angular change detection manually. So, now a great method comes ng.applyChanges(component) to trigger the change detection.

ng.applyChanges(appComp);

or, get directly applying to the node.

ng.applyChanges($0)

ng.getInjector

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

ng.getInjector(appComp);

or

ng.getInjector($0);

ng.getOwningComponent

Retrieves the component instance whose view contains the DOM element.

For example, if we call appComp then angular debug will return the AppComponent and if any other like a hero component then it will return HeroComponent.

var titleHeader= document.querySelector(‘#title-header’);
var appComp = ng.getComponent(titleHeader); 
ng.getOwningComponent(appComp); 
//Or 
var titleHeader = document.querySelector(‘#title-header’); 
ng.getOwningComponent(titleHeader);

ng.getContext

To check and 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).

// get the AppComponent 
var appComp = ng.getContext($0) 
// get the AppComponent
var subComponent = ng.getOwningComponent(appComp)
// Change the title name
appComp.editingTitle.name = 'Welcome Debug';
// Compare the hero in the child an parent component 
appComp.editingTitle.name === subComponent.variable[4].name;
// Save the changes to the hero 
appComp.saveTitle()
// Apply change detection 
ng.applyChanges(appCOmp)

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

Keep coding, thanks for reading this blog.