How to follow an element in an Angular component?

Question

JavaScript

Hello guys!
You need to start constantly monitoring the element of the component, as soon as this component is built.
you need to keep track all the time if there are children in it
please help

Answer 1

How can something change in a DOM element for no reason? In order for something to change in it, some events must occur (Events from input devices, asynchronous timer calls, an XHR request response from the server, a request from the server via sockets, etc.) so, you should follow exactly these events, not behind the element.

Answer 2

As mentioned above, most often you need to monitor not the element itself, but the data that affects it. But if you still need to (for example, if you need to wait for the internals of a third-party component to load), then you can make a crutch - for example, poll a native element by timeout:
1) In the template, give the element an id with a grid:
< div #myElement >...< / div >
2) In the component code, access this element:
@ViewChild('myElement')
public myElement: ElementRef;
3) Timer check some property of the element's JS model (its size or whether it has child elements):
let rect = this.container.nativeElement.getBoundingClientRect();
if (rect.width > 0) {
console.log('Something has changed!');
}