title: Angular 4 ngfor or ngif
body: <p>I don't know what to use for my problem.</p>
  
  <p>I'm getting some information from my HTTP request, and I need to show a prerequisite from a Product when it has a prerequisite. When it doesn't have it I want it to show me a static message like <code>&lt;h1&gt;Test&lt;/h1&gt;</code>.</p>
  
  <p><strong>This is my Typescript</strong></p>
  
  <pre><code>  public getAllProducts() {
      return new Promise((resolve, reject) =&gt; {
        this.http
          .get(
            `${this.kioskservice.getAPIUrl()}products/?apikey=${this.kioskservice.getAPIKey()}&amp;format=json`
          )
          .toPromise()
          .then(
            res =&gt; {
                this.config = res.json();
                // Get all product names
              if (this.config &amp;&amp; this.config.length) {
                this.names = [];
                for (let i = 0; i &lt; this.config.length; i++) {
                  this.names.push(this.config[i]['Name']);
                }
                } 
                // Get all preruiquisites of the products
                if (this.config &amp;&amp; this.config.length) {
                    this.prerequisites = [];
                    for (let i = 0; i &lt; this.config.length; i++) {
                        this.prerequisites.push(this.config[i]['Prerequisites']);
                    }
                }
                console.log(this.prerequisites);
              resolve();
            },
            msg =&gt; {
              throw new Error("Couldn't get all Bookings: " + msg);
            }
          );
      });
    }
    public getNames() {
      return this.names
      }
  
    public getPrerequisites() {
      return this.prerequisites
      }
  }
  </code></pre>
  
  <p><strong>This is my HTML</strong></p>
  
  <pre><code>&lt;li *ngFor="let prerequisite of productservice.getPrerequisites()"&gt;
      &lt;i&gt;{{prerequisite}}&lt;/i&gt;
  &lt;/li&gt;
  &lt;li *ngFor="let prerequisite of !productservice.getPrerequisites()"&gt;
      &lt;i&gt;TEST&lt;/i&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>The HTML above will show me all 40 Objects that I receive from my HTTP request, but only 4 of those 40 have a Prerequisite text so I will get 36  empty <code>&lt;i&gt;</code> elements and 4 <code>&lt;i&gt;</code> elements with the prerequisite text in it.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p><a href="https://i.stack.imgur.com/XGz9G.png" rel="nofollow noreferrer">Image of Array of Objects</a></p>