как сделать прокрутку карты div / list и загружать 4 данные за каждую прокрутку в angular

Question

вот код: https://stackblitz.com/edit/angular-pza9qs-fwjv4u?file=src / app / app.component.ts

HTML

<div nz-row nzGutter="8">
  <div nz-col nzSpan="6" *ngFor="let data of data">
    <nz-card
      style="width:200px;"
      [nzCover]="coverTemplate"
      [nzActions]="[actionSetting, actionEdit, actionEllipsis]"
    >
      <nz-card-meta
        nzTitle="{{data.title}}"
        nzDescription="This is the description"
        [nzAvatar]="avatarTemplate"
      ></nz-card-meta>
    </nz-card>
  </div>
</div>

<ng-template #avatarTemplate>
  <nz-avatar
    nzSrc="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
  ></nz-avatar>
</ng-template>
<ng-template #coverTemplate>
  <img
    alt="example"
    src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
  />
</ng-template>
<ng-template #actionSetting>
  <i nz-icon nzType="setting"></i>
</ng-template>
<ng-template #actionEdit>
  <i nz-icon nzType="edit"></i>
</ng-template>
<ng-template #actionEllipsis>
  <i nz-icon nzType="ellipsis"></i>
</ng-template>

TS

 data = [{
    title: "Card1"
  },{
    title: "Card2"
  },{
    title: "Card3"
  },{
    title: "Card4"
  },{
    title: "Card5"
  },{
    title: "Card6"
  },{
    title: "Card7"
  },{
    title: "Card8"
  },{
    title: "Card9"
  }];

То, что я пытаюсь здесь сделать, это сделать его прокручиваемым по горизонтали, и он будет отображаться за 4 просмотра карт. как сделать прокрутку и загрузку при прокрутке.