title: How can i get all images inside of an angular component, including images in children (and children of children...) components
body: <p>I've tried different css selectors and methods, like</p>
  <pre><code>var elements = document.querySelectorAll('#container img');
  var elements = this.el.nativeElement.querySelectorAll('img');
  var elements = this.el.nativeElement.getElementsByTagName('img');
  </code></pre>
  <p>They all only select in parent component. Is there even a way to achieve this? Something like ::ng-deep behaviour.</p>
  <p>Just to make it a bit more clear, i want to apply some sort of loading screen for different page sections. Each section is an angular component, which can contain other components of free structure.
  for the first approach i just want to implement onload handler for every image. This piece of code seems to be working fine, but it only refers to component own images. So, if there is a child component with a huge image inside, my loading screen logic fails :(</p>
  <pre><code>const addOnloadToImages = () =&gt; {
    const images = this.el.nativeElement.querySelectorAll&lt;HTMLImageElement&gt;('img');
    console.log(`${this.sectionId} images: `, images.length);
    let imagesLoaded = 0;
  
    if (!images.length) this.domService.sectionImagesLoaded.next(this.sectionId);
    images.forEach(image =&gt; {
      image.onload = (event) =&gt; {
        imagesLoaded++;
        if (imagesLoaded === images.length) this.domService.sectionImagesLoaded.next(this.sectionId);
      };
    });
  }
  </code></pre>