Can't print entire content of Ionic 3 page

Question

Background: I'm trying to print a specific part of an Ionic page consisting of a long list of items. The issue is that I can't print the entire list of items once it doesn't fit on one page (and one has to scroll down to see all items).

I would expect the print dialog which opens upon calling printPage() to recognize that multiple pages should be printed since the complete list of items doesn't fit one one page. The print dialog box however remarks that only one page will be printed

This is the content I want to print: (from reports.html)

  <div *ngFor="let transaction of transactions" >
    <ion-row class="row--line" padding-bottom>
      <ion-col col-1>
        {{transaction.protocolIdentifier.toUpperCase()}}
      </ion-col>
       ...
    </ion-row>
  </div>

I'm using the native browser print function which is invoked from reports.html in reports.ts upon calling which the print dialog box opens automatically, showing that 1 of 1 pages will be printed. (should be 1 of n pages however)

  public printPage(): void {
    window.print()
  }

To only print the contents of that particular div, I'm using the following in my app.scss: (found at https://github.com/ionic-team/ionic/issues/12002 which is related to my issue)

@media print{
  ion-header{ display: none !important; }
  .colored-background { display: none !important; }
  .dontPrint { display: none !important; }
}

My question now is how to print as many pages as are required to fit the whole content of the above mentioned div. Please note that I'm developing for a desktop app, not mobile, using Ionic 3*

Answer 1

Here, could you try to change *ngFor as like below?

<div *ngFor="let transaction of transactions" >

so your code would be like;

  <div *ngFor="let transaction of transactions" >
    <ion-row class="row--line" padding-bottom>
      <ion-col col-1>
        {{transaction.protocolIdentifier.toUpperCase()}}
      </ion-col>
       ...
    </ion-row>
  </div>