{"id":824,"date":"2023-04-19T05:00:00","date_gmt":"2023-04-19T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=824"},"modified":"2024-10-21T12:44:25","modified_gmt":"2024-10-21T19:44:25","slug":"debugging-with-the-ng-namespace","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/debugging-with-the-ng-namespace\/","title":{"rendered":"Debugging with the ng namespace"},"content":{"rendered":"\n

Angular 9 introduced the ng<\/code> namespace variable, which is available in development mode but not exposed when the application is running in production mode.<\/p>\n\n\n\n

We can debug an application using that global namespace without any breakpoint<\/a> or dev tools extension<\/a>. Here’s how.<\/p>\n\n\n\n

First, select a DOM element<\/h2>\n\n\n\n

Using your browser dev tools, select a DOM element on the page as follows:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

When an element is selected using the above process, it becomes assigned to a variable called $0<\/code> in the developer tools console. The previous selection is known as $1<\/code>, the one before that $2<\/code>, and on and on.<\/p>\n\n\n\n

Then, use the ng<\/code> workspace functions<\/h2>\n\n\n\n

If the selected DOM element is an Angular component<\/strong>, you can head to the browser console and type ng.getComponent($0)<\/code>. This returns a reference to the component instance – ready to be explored and debugged:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

If the element you select is not a component (say a div<\/code> or an image), use ng.getOwningComponent($0)<\/code> to get a reference to the parent component of the selected DOM element.<\/p>\n\n\n\n

If you want to select the directives applied to that element, use ng.getDirectives($0)<\/code>. It’s also possible to access the context of a template in a ngFor or ngIf directive<\/a>.<\/p>\n\n\n\n

There are a few more useful functions available in that global namespace<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Angular 9 introduced the ng namespace variable, which is available in development mode but not exposed when the application is running in production mode. We can debug an application using that global namespace without any breakpoint or dev tools extension. Here’s how. First, select a DOM element Using your browser dev tools, select a DOM […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,13],"tags":[],"class_list":["post-824","post","type-post","status-publish","format-standard","hentry","category-angular","category-debugging"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t