I am working on pagination using NgbdPaginationBasic app.module.ts
import { NgbdPaginationBasic } from './pagination-basic';
I need to create a set of pages in A4 size with Header and Footer visible only in the first two pages. I have applied pagination on the body only app.html
<table class="table">
<tr>
<th>id</th>
<th>name</th>
<th>email</th>
</tr>
<tr *ngFor="let item of data | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize">
<td>{{item.id}}</td>
<td>{{item.first_name}}{{item.last_name}}</td>
<td>{{item.email}}</td>
</tr>
</table>
Here is a StackBlitz I created for demonstration. The pagination is working fine on the body but the Header and Footer I want them to be hidden after the 2nd page.
Is there a way to do it or any other tool or thing I can use? All three parts of the page(header,body,footer) should have the same pagination tag.
Just use *ngIf
, for ex.:
<div style="border:1px solid black;margin-bottom:4px" *ngIf="page <= 2"> <---
<hr/><span> HEADER </span><hr/>...
Your code:
<div>
<div style="border:1px solid black;margin-bottom:4px" *ngIf="page <= 2">
<hr/><span> HEADER </span><hr/>
<div class="intro mt-3 ml-3">
<span>John Doe</span>
<br/>
<span>99/123.342 LAT Street</span>
<br/>
<span>Mars Community</span>
<br/>
<span>XYZ Country</span>
<br/>
<span>Ph. 123243423423</span>
<br/>
<br/>
<span class="mt-2">Dear John</span>
<br/>
</div>
</div>
<div style="border: 1px solid red">
<hr/><span style="color : navy">MAIN BODY</span><hr/>
<table class="table">
<tr>
<th>id</th>
<th>name</th>
<th>email</th>
</tr>
<tr *ngFor="let item of data | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize">
<td>{{item.id}}</td>
<td>{{item.first_name}}{{item.last_name}}</td>
<td>{{item.email}}</td>
</tr>
</table>
</div>
<div style="border :1px solid black;margin-top:3px" *ngIf="page <= 2">
<hr/><span> Footer </span><hr/>
<p><strong>PLEASE READ THIS</strong><p>
<span>THIS IS THE FOOTER. HEADER AND FOOTER TO BE DISPLAYED FOR PAGES 1 and 2 ONLY </span>
</div>
<div>
<ngb-pagination [pageSize]="25" [collectionSize]="100" [(page)]="page" aria-label="Default pagination"></ngb-pagination>
<hr>
Hope it helps!
Thanks man, but can I set the dimensions to that of an A4 page. like how can I set custom height and width?