title: How to use ngfor in ionic html display according to the count of object and determining the rest?
body: <p>I am a beginner Ionic developer. I am facing some lack logical concept to display the image according to the no of object and determine the rest accordingly. This might be not so clear. SO here the code </p>
  
  <p>What I want is suppose if I get 5 image from database rest 15 should come from for loop.</p>
  
  <pre><code> &lt;ion-grid&gt;
        &lt;ion-row no-padding no-margin&gt;
          &lt;ion-col class="food-item" col-4 *ngFor="let number of [0,1,2,3..20]" (click)="addFood()"&gt;
                &lt;img src="http://placehold.it/250x200" &gt;
                &lt;div class="card-title" &gt;
                  &lt;ion-icon name="add-circle" style="zoom: 2.5;" color="core"&gt;&lt;/ion-icon&gt;
                &lt;/div&gt;
            &lt;/ion-col&gt;
        &lt;/ion-row&gt;
  
        &lt;ion-row *ngIf="food" no-padding no-margin text-center&gt;
          &lt;ion-col class="food-item" col-4 *ngFor="let f of food | async " class="card-background-page"&gt;
              &lt;img [src]="f.image" (click)="editFood(f)" width="250px" height="80px"&gt;
              &lt;div class="card-title"&gt;{{f.title}}&lt;/div&gt;
          &lt;/ion-col&gt;
        &lt;/ion-row&gt;
    &lt;/ion-grid&gt;
  </code></pre>
  
  <p>here I have made two rows -- one for displaying database image and another for adding food. But I want one row with ngfor that will display food images and rest will be placeholder image.</p>
  
  <p>Thanks</p>