I am adding scroller over mat-grid-list which display 5 columns in a row. virtual scroller is not loading data on scroller

Question

I have added the virtual scroller over mat grid list as follows

 <virtual-scroller #scroll [items]="tiles" (vsEnd)="onVsEnd($event)" 
      flex="100" style="width:80vw" bufferAmount="10">
       <mat-grid-list #grid rowHeight="205px" gutterSize="10px" >
            <mat-grid-tile colspan="1" rowspan="1" *ngFor="let tile of scroll.viewPortItems">
                <my-custom-component [testValue]="tile.value"></my-custom-component>
              </mat-grid-tile>
          </mat-grid-list>      
      </virtual-scroller>

although I have specified bufferAmount but It doesn't load the buffered items and on hitting end it doesn't load new item with my custom component.I mean I can't see my customer component rendering in mat-grid-list. Do I need to update scroll.viewPortItems in my ngFor???

the implementation of event vsEnd is as follows

onVsEnd(event) {
if((event.endIndex+10) >= (this.tiles.length-1)){
//push new row with 5 elements
         console.log("need to add , end is  " + event.endIndex ); 
         this.tiles.push({value : "elem " + (this.tiles.length + 1)})
         this.tiles.push({value : "elem " + (this.tiles.length + 2)})
         this.tiles.push({value : "elem " + (this.tiles.length + 3)})
         this.tiles.push({value : "elem " + (this.tiles.length + 4)})
         this.tiles.push({value : "elem " + (this.tiles.length + 5)})
          this.tiles = this.tiles.slice();
        }
}

I want first it should display all items more than buffer. if buffer is finished, then add more rows as per my method.

Any help is appreciated.

I have tried by removing bufferAmount and updating my method, but nothing worked.

my-custom-component.html

<mat-card flex style="width:250px;height:206px"> 
<div layout-gt-sm="column" layout-align="start stretch" flex>
    <div style="height:0.3em" flex></div>
    <mat-progress-bar class="top-bar" mode="determinate" value="50" bufferValue="100"></mat-progress-bar>
</div>
</mat-card>

ScrollerComponent.html.ts

 <virtual-scroller #scroll [items]="tiles" (vsEnd)="onVsEnd($event)" 
  flex="100" style="width:80vw" bufferAmount="10">
   <mat-grid-list #grid rowHeight="205px" gutterSize="10px" >
        <mat-grid-tile colspan="1" rowspan="1" *ngFor="let tile of scroll.viewPortItems">
            <my-custom-component [testValue]="tile.value"></my-custom-component>
          </mat-grid-tile>
      </mat-grid-list>      
</virtual-scroller>

ScrollerComponent.scss

   virtual-scroller {
   display: block;
   width: 100%;
   height: 430px;
  }

ScrollerComponent.ts

 export class ScrollerComponent { 

tiles :any[] = [ {"value":1},{"value":2},{"value":3},{"value":4},{"value":5},{"value":6},{"value":7},{"value":8},{"value":9},{"value":10},{"value":11},{"value":12},{"value":13},{"value":14},{"value":15},{"value":16},{"value":17},{"value":18},{"value":19},{"value":20},{"value":21},{"value":22},{"value":23},{"value":24},{"value":25},{"value":26},{"value":27},{"value":28},{"value":29},{"value":30},{"value":31}];

onVsEnd(event) {
if((event.endIndex+10) >= (this.tiles.length-1)){
//push new row with 5 elements
     console.log("need to add , end is  " + event.endIndex ); 
     this.tiles.push({value : "elem " + (this.tiles.length + 1)})
     this.tiles.push({value : "elem " + (this.tiles.length + 2)})
     this.tiles.push({value : "elem " + (this.tiles.length + 3)})
     this.tiles.push({value : "elem " + (this.tiles.length + 4)})
     this.tiles.push({value : "elem " + (this.tiles.length + 5)})
      this.tiles = this.tiles.slice();
    }
 }

}

Expected Output :

On Scrolling down, first load the elements more than buffered and then append elements as per onVsEnd function. Currently it appends to the array but doesn't display my custom element. It should display custom element. I might need to update the viewPort...I am not getting it.