How to pass value dynamically based on media query

Question

In my product section there are around 300 products so for pagination I have used ngx-pagination plugin. So products should be displayed based on media query. for an eg I have to pass the value (In Media query) for 1600px to 1200px should have itemsPerPage:30, 1199 to 768 itemsPerPage:24

How to achieve this?

<ecom-section-box>
    <ecom-card-wc-5 *ngFor="let data of dataArray4  | paginate: { itemsPerPage: 30, currentPage: p } " [data]="data"></ecom-card-wc-5>
</ecom-section-box>
<div class="card card2">
    <span class="pagination-alignment">
        <pagination-controls (pageChange)="p = $event" ></pagination-controls>
    </span>
</div>

Answer 1

To get window width on init

public innerWidth: any;
ngOnInit() {
  this.innerWidth = window.innerWidth;
}

If you wanna keep it updated on resize:

@HostListener('window:resize', ['$event'])
onResize(event) {
  this.innerWidth = window.innerWidth;
}

You can use this code to check if the window size is 1600px to 1200px or 1199 to 768 and set the itemsPerPage accordingly.

How you can use this code:

@HostListener('window:resize', ['$event'])
onResize(event) {
  this.innerWidth = window.innerWidth;
  if (this.innerWidth <= 1600 && this.innerWidth >= 1200) {
    itemsPerPage = 30;
  } else if (this.innerWidth <= 1199 && this.innerWidth >= 768) {
    itemsPerPage = 24;
  }
}