title: Ionic ng-if generates error - ionic 3
body: <p>I am trying to implement product categories in ionic application as received from the api. but while implementing the same i get the following error</p>
  
  <pre><code>Error: Template parse errors:
  Can't bind to 'ng-if' since it isn't a known property of 'div'."
  </code></pre>
  
  <p>Here is the code:</p>
  
  <pre><code>  &lt;div class="width50" *ngFor="let object of dataList"&gt;
      &lt;div *ng-if= "{{object?.categories[0]?.slug}} == single"&gt;
      &lt;img src="{{object.images[0].src}}" width="150"  (click)="navigateToPage(object.id)" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>When i printed the value for <code>{{object?.categories[0]?.slug}}</code> the code worked fine and returned single.</p>
  
  <p>using *ngif over *ng-if also does not seem to work it shows the following error.</p>
  
  <pre><code>`Template parse errors:
  TypeError: key[0] is undefined ("
  &lt;ion-content padding&gt;
    &lt;div class="width50" *ngFor="let object of dataList"&gt;
      &lt;div [ERROR -&gt;]*ngIf= "{{object?.categories[0]?.slug}} == single"&gt;
      &lt;img src="{{object.images[0].src}}" width="15"): ng:///AppModule/SinglePage.html@21:9
  Can't bind to '*ngIf' since it isn't a known property of 'div'. "`
  </code></pre>
  
  <p>I believe that this might happen because maybe not all objects have values is the category array. So is there a way to ensure that the <code>*ng-if= "{{object?.categories[0]?.slug}} == single"</code> condition is checked only after ensuring that the category array is non-empty? also can we have both the conditions and loop on the same div ?</p>