title: Angular2 How to ngIf empty object or array
body: <p>I am getting json object from the server and they are deep nested.</p>
  
  <p>Anyway, I want to show 'The user hasn't filled in yet' when the json object is empty (or array) </p>
  
  <p>I tried almost everything but they didn't work. What am I doing wrong?</p>
  
  <pre><code>&lt;div class="common-container" *ngFor="let detail of deepTeaInfo | getValues"&gt;
    &lt;div id="exp-box" *ngFor="let grade of detail['introduceInfo']['grade'] | getValues"&gt;
      &lt;p class="fontstyle3"&gt;Grade: &lt;span class="fontstyle2"&gt;{{grade.category | type_transform}}&lt;/span&gt;&lt;/p&gt;
      &lt;p class="fontstyle3"&gt;Period: &lt;span class="fontstyle2"&gt; {{grade.when | type_transform}}&lt;/span&gt;&lt;/p&gt;
      &lt;p class="fontstyle3"&gt;Description: &lt;span class="fontstyle2"&gt; {{grade.description}}&lt;/span&gt; &lt;/p&gt;
  
      &lt;p class="fontstyle2" *ngIf="grade?.length &gt; 0"&gt;
        The user hasn't filled in yet
      &lt;/p&gt;
    &lt;/div&gt;
    &lt;br&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The things I've tried</p>
  
  <pre><code> *ngIf="grade?.length &gt; 0"
  
  *ngIf = "(grade|json) == '{}'"
  
  *ngIf = "grade.length &gt;0"
  
  *ngIf = "(grade|json).length &gt;0"
  
  *ngIf "(grade|json) == ({}|json)"
  </code></pre>
  
  <p>they didn't work.</p>
  
  <p>If I {{grade.json}} in the html, I see something like</p>
  
  <pre><code> {when: 2011, description: temp, category: school},
   {when: 2011, description: temp, category: school}
  </code></pre>
  
  <p>If I {{grade}} in the html, I see</p>
  
  <pre><code> [object Object]
   [object Object]
  </code></pre>
  
  <p>(I know that the array is empty seeing from the json string that I got from the server :)) </p>
  
  <p>What am I doing wrong?</p>