Get an instance of the rendered component, in Developer Tools
Debugging in Angular

I am a developer from Toronto, Canada and I enjoy writing about JavaScript, Angular and the .NET framework.
Search for a command to run...
Debugging in Angular

I am a developer from Toronto, Canada and I enjoy writing about JavaScript, Angular and the .NET framework.
No comments yet. Be the first to comment.
What does 99.99% mean?

Using Projections - getting related data

Expose an entity using HotChocolate

Reactive programming is somewhat of a shift in thinking on how you get values from a source of data. Instead of you asking the source every few seconds for an update, the source sends you data you are interested in over time. In other words, we are t...

Learn to create your own tags like control

Do you want to get the component instance that is rendered on the browser? Here is a quick way to do it.
I have a component called HelloComponent and it has a logMessage method inside it. Below is the code:
import { Component, Input } from '@angular/core';
@Component({
selector: 'hello',
template: `<h1 (click)="logMessage()">Hello {{name}}!</h1>`
})
export class HelloComponent {
@Input() name: string;
logMessage() {
console.log('This is a hello component');
}
}
When this component renders, it shows up as follows:
<hello _ngcontent-avf-c62="" _nghost-avf-c61="" ng-reflect-name="Angular 12">
<h1 _ngcontent-avf-c61="">Hello Angular 12!</h1>
</hello>
This is an HTML output, and although it shows me the actual output of the component, I can't do much with it. I want to get hold of the component instance itself. Below are the steps to get that done:
var hello = ng.getComponent($0);
Now you have an instance of the HelloComponent. You can try the following:
hello.logMessage();
You should see the message logged.
Note: Using $0 allows you to get hold of the element that's clicked (selected) on the Elements tab of the developer console.
To update the name input of our component, and have change detection trigger, we can write the following in our console (making sure we have selected the element):
hello.name = 'Updated hello!';
ng.applyChanges($0);
Now our view should show the new value.
Enjoy debugging!