Angular how to check from which component is a div

Question

I'm interested in how to check in console which component was rendered. I mean, let's assume that in console -> Elements you can see a lot of divs, for example. How can you check from which component are this divs coming?

Answer 1

@Component({
    selector: 'my-component',
    template: '<div><div></div></div>'
})
export class MyComponent {
...
}

If you add the component above in your app, you should be able to see <my-component>...</my-component> in your DevTools > Elements panel.

You can also use the Angular DevTools extension to explore the HTML of your components.