title: How can I load angular components in a page in sequence?
body: <p>My problem scenario is as follows,</p>
  
  <p>I have a page with a large form (+100 inputs). These inputs are divided into sections and those sections are developed as different components (for reusing purposes). So the general layout of the page is something like this,</p>
  
  <pre><code>&lt;div&gt;
      &lt;form-section-a&gt;&lt;/form-section-a&gt;
      &lt;form-section-b&gt;&lt;/form-section-b&gt;
      &lt;form-section-c&gt;&lt;/form-section-c&gt;
      ...
      &lt;form-section-z&gt;&lt;/form-section-z&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Each form section will take some time to process because most of the inputs are material select boxes, and necessary data need to be loaded from the REST API and processed.</p>
  
  <p>In the above shown layout, angular will try to render all form sections at once, hence adding up processing times of each section, which will cause the browser to freeze.</p>
  
  <p>So, my plan is to load sections one after the other. <strong>Is there any recommended way to achieve this?</strong></p>
  
  <p>I have tried to write a structural directive to load components one after the other. Even though the directive works, there is no way I can know when the component has finished its internal processing work (May be the AfterViewInit hook). The directive looks something like this,</p>
  
  <pre><code>&lt;div tcSequentialRenderer&gt;
      &lt;form-section-a *tcIfPreviousBlockLoaded&gt;&lt;/form-section-a&gt;
      &lt;form-section-b *tcIfPreviousBlockLoaded&gt;&lt;/form-section-b&gt;
      &lt;form-section-c *tcIfPreviousBlockLoaded&gt;&lt;/form-section-c&gt;
      ...
      &lt;form-section-z *tcIfPreviousBlockLoaded&gt;&lt;/form-section-z&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>.</p>
  
  <pre><code>@Directive({selector: '[tcSequentialRenderer]'})
  export class SequentialRendererDirective implements AfterViewInit {
  
    @ContentChildren(IfPreviousBlockLoadedDirective) directives: QueryList&lt;IfPreviousBlockLoadedDirective&gt;;
  
    ngAfterViewInit() {
      // start from first item
      if (this.directives.length &gt; 0) {
        this.directives.toArray()[0].show();
      }
  
      let directivesArray = this.directives.toArray();
      for (let i = 1; i &lt; directivesArray.length; i++) {
        directivesArray[i - 1].done.subscribe(status =&gt; {
          if (status) {
            directivesArray[i].show();
          }
        });
      }
    }
  }
  </code></pre>
  
  <p>.</p>
  
  <pre><code>@Directive({selector: '[tcIfPreviousBlockLoaded]'})
  export class IfPreviousBlockLoadedDirective {
  
    private isShown = false;
  
    public done: BehaviorSubject&lt;boolean&gt; = new BehaviorSubject&lt;boolean&gt;(false);
  
    constructor(
      private tplref: TemplateRef&lt;any&gt;,
      private vcref: ViewContainerRef
    ) { }
  
    public show(): void {
      if (!this.isShown) {
        this.vcref.createEmbeddedView(this.tplref);
        this.isShown = true;
      }
    }
  }
  </code></pre>
  
  <p>If I can somehow access the associated component from the <code>IfPreviousBlockLoadedDirective</code> this method will work seamlessly.</p>
  
  <p>Are there any suggestions to fix this, or are there any other ways to achieve this without changing the form-section components?</p>
  
  <p>NOTE: Form sections can be any angular component.</p>