how to show iterated components in separate pages using media print in css

Question

I have an iterative component/div since I am using Angular. I also want to print the iterated div in separate bondpapers. But when I try to print it, it only shows the first page

This is my HTML

<div class="print-template">
    <div class="print-actions">
        <button class="ui default button" (click)="print()">Print</button>
        <button class="ui default button" (click)="togglePrintPaper()">Cancel</button>
    </div>
    <div class="paper">
        <ng-template ngFor let-staff [ngForOf]="divideStaffs(tempoArray, 20)">
            <app-print-workrec [data]="staff"></app-print-workrec>
            <app-print-workrec [data]="staff"></app-print-workrec>
        </ng-template>
    </div>
</div>

As you can see app-print-workrec is called twice. Since it is called twice, there should also be 2 bondpapers. But in my CSS, only page 1 shows when Print Functionality is running. Here is my CSS

@media print {
body  {
    margin: 0;
}

.print-actions {
    display: none !important;
}

.paper {
    margin-left: -30px;
    margin-top: -50px;
}

.print-template {
    overflow-y: visible !important;
}

.paper {
    overflow: visible !important;
}
}

This is the image of the output for Print: (There should be 2 pages)

How do you solve this?