title: Scroll to specific Expansion Panel in Material Accordion after Component loaded
body: <p>We are trying to scroll to a specific <code>&lt;mat-expansion-panel&gt;</code> item within a <code>&lt;mat-accordion&gt;</code>. The problem is that <code>ngAfterViewInit()</code> is triggered before the accordion and its panels are fully loaded. This means the <code>scrollIntoView()</code> function is called while the accordions are being loaded and the page size afterwards change making our scroll operation take us to the wrong position of the page.</p>
  
  <p>We also tried the other lifecycle hooks, which did not help, since they're all called to early. Does somebody have any good practice for this issue?</p>
  
  <p>Our source is simple since we are trying to implement something very basic:</p>
  
  <p><strong>landingpage.component.html</strong></p>
  
  <pre><code>&lt;mat-accordion&gt;
     &lt;mat-expansion-panel id="pangel-1"&gt;
      &lt;mat-expansion-panel-header&gt;
        &lt;mat-panel-title&gt;Lorem ipsum&lt;/mat-panel-title&gt;
      &lt;/mat-expansion-panel-header&gt;
      &lt;p&gt;
        Lorem ipsum dolor sit amet,
        consetetur sadipscing elitr,
        sed diam nonumy eirmod tempor invidunt...
      &lt;/p&gt;
    &lt;/mat-expansion-panel&gt;
    &lt;mat-expansion-panel id="panel-2"&gt;
      &lt;mat-expansion-panel-header&gt;
        &lt;mat-panel-title&gt;Lorem ipsum&lt;/mat-panel-title&gt;
      &lt;/mat-expansion-panel-header&gt;
      &lt;p&gt;
        Lorem ipsum dolor sit amet,
        consetetur sadipscing elitr,
        sed diam nonumy eirmod tempor invidunt...
      &lt;/p&gt;
    &lt;/mat-expansion-panel&gt; 
  
    [ ... ] // more panels
  
  &lt;/mat-accordion&gt;
  </code></pre>
  
  <p><strong>landingpage.component.ts</strong></p>
  
  <pre><code>ngAfterViewInit() {
    this.scroll("panel-1");
  }
  
  scroll(id) {
    console.log(`scrolling to ${id}`);
    let el = document.getElementById(id);
    el.scrollIntoView();
  }
  </code></pre>