title: Angular: create dynamic Reactive Form after async call & AsyncPipe
body: <p>I do an async service call to get a list of elements.</p>
  
  <pre><code> public elementList: Array&lt;Element&gt;;
     ... 
     this.service.getElementList().subscribe( list =&gt; {
         this.elementList = list;
         this.createFormGroup(list);
       }
     );
     ...
  </code></pre>
  
  <p>When I receive the list of elements (I have a subscription the the service call) I build the Form Group based on the list of elements.
  In the template, I have an *ngIf to paint the  only if the list is bigger than zero.</p>
  
  <pre><code>*ngIf="elementList?.length&gt;0"
  </code></pre>
  
  <p>As the elementList is obtained asynchronously, this ngIf does not work. I have read that I can use ngIf with AsnycPipe.  So in the template I will have:</p>
  
  <pre><code>*ngIf="elementList$ &amp;&amp; elementList$.length&gt;0"
  </code></pre>
  
  <p>where elementList$ is the Observable returned from the service call.</p>
  
  <pre><code>   public elementList$: Observable&lt;Array&lt;Element&gt;&gt;;   
  
     elementList$ =this.service.getElementList()
  </code></pre>
  
  <p>I would like to know how can I create the FormGroup once I receive the elementList. First I need to create the FormGroup and then the template should call the *ngIf that will paint the elements.</p>