Angular cdk-virtual-scroll-viewport not working

Question

I have a component with cdk-virtual-scroll-viewport which displays cards

scrolling.component.html

<cdk-virtual-scroll-viewport (scrolledIndexChange)="scrolledEnd()" class="list-container" [itemSize]="50">
  <app-coin *cdkVirtualFor="let coin of coins; trackBy: trackByFn" [coin]="coin"
            class="list-group-item state-item">
  </app-coin>
</cdk-virtual-scroll-viewport>

scrolling.component.ts

export class ScrollingComponent {
  @ViewChild(CdkVirtualScrollViewport) private viewport: CdkVirtualScrollViewport;

  public coins: ICoin[] = [GOLD_SALE_COIN, PRESALE_COIN, GOLD_SALE_COIN, SILVER_COIN, GOLD_COIN, GOLD_SALE_COIN];

  constructor(private cd: ChangeDetectorRef) {
  }

  public trackByFn(index: number, item: ICoin): number {
    return item.id;
  }

  public scrolledEnd(): void {
    if(this.viewport.getRenderedRange().end === this.coins.length) {
      this.coins.push(...[GOLD_SALE_COIN, PRESALE_COIN, GOLD_SALE_COIN, SILVER_COIN, GOLD_COIN, GOLD_SALE_COIN]);
      this.cd.markForCheck();
    }
  }
}

I only output 6 cards, which are defined in the array

How do I make sure that the moment I finish finishing, I have more elements added