Different types of paging depending on the type of device on angular 12

Question

Good day, I need do 2 paginations for only one table, I have 20 rows in my table:

• The first pagination is in desktop, I show 10 rows, in the first page of my pagination, and in the second page the other 10 rows.

• The second is in mobile, I need show only 3 rows, in the first page, and in the second page 3 rows too, so, until completing the 10 registrations.

I use ngx-pagination, for do my pagination.

I appreciate all your help.

This is my code:

Combinations.components.ts

// model
import {Combinations} from '../../models/Combinations.model';

@Component({
  selector: 'app-results',
  templateUrl: './results.component.html',
  styleUrls: ['./results.component.css']
})
export class ResultsComponent implements OnInit {

  combinations: Combinations[] = [];
  p: number = 1;

  @Input('data')
    set data( data:any){
      this.combinations = data;
    }

  constructor(
  ) { }

  ngOnInit(): void {
  }
}

Combinations.components.html

<!-- table -->
<table class="nkn-table nkn-vertical" >
    <thead>
        <tr>
            <th>n°</th>
            <th>Model</th>
            <th>Skus</th>
            <th>Description</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let combination of combinations | paginate: { itemsPerPage: 10, currentPage: p } , let i=index">
            <td data-title="n°">{{ 10 * (p - 1) + i  + 1}}</td>            
            <td data-title="model">{{combination.model}}</td>
            <td data-title="skus">{{combination.skus}}</td>
            <td data-title="description">{{combination.description}}</td>
            <td data-title="price">{{combination.price}}</td>
        </tr>
    </tbody>
</table>
<!-- table end -->

<!-- pagination -->
<pagination-controls (pageChange)="p = $event"></pagination-controls>

products.compoments.html

       .
       .
       .
 <div class="rc-table-container">
            <!-- table -->
            <app-results  [data]="data"></app-results>
 </div>

Answer 1

It's only use a variable, e.g. rows and use in the pipe

<tr *ngFor="let combination of combinations | paginate: 
         { itemsPerPage: rows, currentPage: p } >
 ....
</tr>

Not yo need change the variable "rows" according desktop or mobile. Well you can use some like this SO or use directly navigator

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
  this.rows=3;
}else{
  this.rows=10
}

Or you can check about the "screen" width

if (window.innerWidth<600){ //Imagine that less than 600 only show 3
  this.rows=3;
}else{
  this.rows=10
}

You can also use fromEvent rxjs operator in the way

  resize$=fromEvent(window, 'resize').pipe(
    startWith({ target: { innerWidth: window.innerWidth } }),
    map((e: any) => (e.target.innerWidth > 600?10:3))
  )

And use

<tr *ngFor="let combination of combinations | paginate: 
         { itemsPerPage: resize$|async, currentPage: p } >
 ....
</tr>

When the screen change the size