Angular如何检查哪个组件是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.

Answer 2

You can simply inspect the HTML in Chromes' Dev Tools. Simply by right-clicking and selecting inspect . In the Elements section where all of the page's HTML is shown you can see different <div> etc. If you observe it closely there are also tags of components that are used by angular to display those <div> .

For example, in the simple stackblitz Angular project. Simple inspection of the HTML will show us this

Here you can see that <h1> is inside the hello-component of Angular which is shown by <hello.... > tag. Which is inside another component my-app-component called <my-app...> . By this logic, you can easily see which HTML is inside which Angular Component