title: Lazy Loading and ScrollIntoView() Angular2(version 7)
body: <p>I'm trying to show a component when first load the page with lazy loading that only load the content if it's in the view. 
  For example: 
  - There are 10 components on the page and I want to show/scroll to the component number 7 on first load with lazy loading(for performance). </p>
  
  <p>How do I do this correctly? Challenge here is because these components are lazy loading and have huge images that messed up the scrollIntoView() and scrolled too much to the top passed the component. </p>
  
  <ul>
  <li>I've tried these approaches but no luck :(</li>
  <li>Put a reference to the component 7:
  
  <ol>
  <li>Scroll to that component by scrollIntoView(). Use window.scrollBy(0, -100) for the navigation bar.</li>
  <li>Get the component offsetTop and use window.scrollTo(0, targetComponent.offsetTop - 100);</li>
  <li>Both approaches above but with a setTimeout of 2s - 5s didn't work either.</li>
  <li>Use scrollIntoView() to scroll to the component, wait couple seconds with setTimeout and use scrollIntoView() again with window.scrollBy(0, -100) also didn't work.</li>
  <li>Give the image container a fixed height (ie: 500px), so the lazy loading images will fill up the container, but what if the component is being used on other pages get a bigger size image (ie: 1200px) will messed up the UI. </li>
  <li>The window.scrollY, window.pageYOffset, getBoundingClientRect().top and these values to get the height I need are different from the code compared from the console.log of the code vs the browser values so my calculations are incorrect.</li>
  <li>scrollIntoView({ block: 'start' }) and window.scrollBy(0, -100) also didn't work too. It scrolled too the top and passed the navbar even though I used window.scrollBy(0, -100). Also tried the setTimeout with this too.</li>
  </ol></li>
  </ul>
  
  <p>Something like this that I tried but the component still scroll too much to the top. </p>
  
  <pre><code>&lt;div&gt;Div 1&lt;/div&gt;
  &lt;div&gt;Div 2&lt;/div&gt;
  &lt;div&gt;Div 3&lt;/div&gt;
  &lt;div&gt;Div 4&lt;/div&gt;
  &lt;div&gt;Div 5&lt;/div&gt;
  &lt;div&gt;Div 6&lt;/div&gt;
  &lt;div #target&gt;Target Div 7&lt;/div&gt;
  &lt;div&gt;Div 8&lt;/div&gt;
  &lt;div&gt;Div 9&lt;/div&gt;
  &lt;div&gt;Div 10&lt;/div&gt;
  </code></pre>
  
  <pre><code>export class BBQComponent implements AfterViewInit {
    @ViewChild("target") targetElement: ElementRef;
  
    ngAfterViewInit() {
      setTimeout(_ =&gt; {
       this.targetElement.nativeElement.scrollIntoView({block: "start"});
       window.scrollBy(0, -100);
      }, 2000); 
    }
  }
  </code></pre>
  
  <p>I expect the page to show the component on first visit just below the navigation bar (about 100px in height). I have searched for the solutions and tried out different things but still stuck at this.</p>
  
  <p>Is there something that I missed to get this feature scrollIntoView to work with lazy loading content? Thanks!!</p>