title: Page Break not working with ngFor in Angular 13
body: <p>I've done some searching around for a solution, but page breaks in an Angular 13 component will not break pages.</p>
  <p>I am using a simple ng-template (extra fields removed for readability):</p>
  <pre><code>&lt;ng-template #testTemplate let-allTheData&gt;
    &lt;div *ngFor=&quot;let dataItem of allTheData&quot; &gt;
      &lt;div&gt;&lt;b&gt;ID:&lt;/b&gt; {{ dataItem.id }}&lt;/div&gt;
      &lt;div style=&quot;break-after:always;&quot;&gt;&amp;nbsp;&lt;/div&gt;  &lt;-- non-working page break
    &lt;/div&gt;
  </code></pre>
    
  <p>The template is setup as a ViewChild like this:</p>
  <pre><code>@ViewChild('testTemplate ') testTemplate !: TemplateRef&lt;any&gt;;
  </code></pre>
  <p>The data gets passed in and processed through a loop</p>
  <pre><code> data.forEach(x =&gt; {
        theThing = {};
        theThing.id = arrtId;
        this.theData.push(theThing);
      });
  </code></pre>
  <p>And the print dialog gets called with this line (using ngx-print):</p>
  <pre><code>this.printer.printAngular(this.testTemplate);
  </code></pre>
  <p>The data shows up fine on the print screen, but the page break in the template does not insert a page break - is the template interfering?  I've also tried &quot;break-after: page,&quot; &quot;break-after: auto&quot; and even &quot;break-before: page,&quot; &quot;break-before: auto&quot; and &quot;break-before: always.&quot; I also tried using the CSS media queries I've seen in a few searches and adding &quot;!Important&quot; to the inline CSS. Nothing has yet worked. Does anyone have any ideas? Thank you!</p>