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

Hope you like part 1 angular APIs, but you get excite to know more APIs which we will explore in this article.

If you didn’t check Part 1, here you go https://ankitsrivastavablog.medium.com/i-am-sure-no-one-told-you-these-angular-debug-tips-part-1-be29daa124f7

ng.getDirectives

The ng.getDirectives() function returns an array of Angular directives that are applied to an element in the DOM.

Using this, we can not only determine what directives are being applied to the element, but we can also access a specific directive instance

ng.getDirectives($0);

Here is a screenshot showing the result of the getDirectives() function.

ng.getListeners

The ng.getListeners() function returns an array of DebugEventListener objects. Using the DebugEventListener object you can examine the name of the event that triggers each listener.

I didn’t found any example for this method, if I do, I’ll post in comment.

ng.getHostElement

The ng.getHostElement() function accepts a directive (remember a component is a directive with a template) and returns the native host element.

Let’s look at an example:

let c = ng.getComponent($(‘book-list’)); 
let el = ng.getHostElement(c);
console.log(el);

ng.getRootComponents

Retrieves all root components associated with a DOM element, directive, or component instance. Root components are those which have been bootstrapped by Angular.

ng.getRootComponents(emp4Comp);

These are available APIs by angular official doc Angular — @angular/core/global. You can try and explore more on this, but these APIs use properly, I am sure you can debug the whole angular application in console itself with it property and component assessable.

Happy coding and enjoy bug list.