title: Angular2: Html replace empty
body: <p>I have an dynamically generated list of items generated as follows:</p>
  
  <pre><code>&lt;div class="servers" *ngFor="let item of products"&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;{{item}}&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>There are cases when item can be equal to blank, or nothing.</p>
  
  <p>I want to use an easy nG method to replace the empty value with something concrete. (UNKNOWN in this case) </p>
  
  <p>I have tried to do something like this:</p>
  
  <pre><code>&lt;td class="headings" ng-if="{{item}}"&gt;{{item}}&lt;/td&gt;
  &lt;td class="headings" ng-if="{{!item}}"&gt;Unknown&lt;/td&gt;
  </code></pre>
  
  <p>But this yields in an error: </p>
  
  <pre><code>Can't bind to 'ng-if' since it isn't a known property of 'td'
  </code></pre>
  
  <p>If I remove the {{}} expression, all items get a UNKNOWN</p>
  
  <pre><code>&lt;td class="headings" ng-if="item"&gt;{{item}}&lt;/td&gt;
  &lt;td class="headings" ng-if="!item"&gt;Unknown&lt;/td&gt;
  </code></pre>
  
  <p>What am I doing wrong?</p>