title: Javascript / Angular - html displays before rendering code
body: <p>I have a function to get rates from products, so lets say I have one product with two rates. So my product has two rates. Then, when I get those rates I must get the prices attached to my product. So for each rate I have to look for its prices.</p>
  <p>The next code below explains this:</p>
  <pre><code>this.loadProductInfo = true; // bool to load data in my form
  
  // First of all, I get rates from API
  // const rates = this._http....
  // Now, for each rate I must search If my product/products have a price:
  
  this.rates.forEach((rate, index, arr) =&gt; {
     this._glbGetPricesForProduct.getPrice(params).subscribe(response =&gt; {
        if (!arr[index + 1]) {
          this.initForm();
          this.loadProductInfo = false;
        } 
     })
  });
  </code></pre>
  <p>The variable loadProductInfo it loads content in my form, so in my html I have:</p>
  <pre><code>&lt;form *ngIf=&quot;!loadProductInfo&quot;&gt;&lt;/form&gt;
  </code></pre>
  <p>But form it still give me error: could not find control name.</p>
  <p>But if I do this instead, it works correctlly:</p>
  <pre><code>setTimeout(() =&gt; {
      this.initForm();
      this.loadProductInfo = false;
  }, 2000);
  </code></pre>
  <p>So what I want its to say my form to wait until I have all code loaded and then after it, load its contents. But instead it cant find the control because it loads before code. Any help I really appreciate it.</p>