Angular does not support the functionality of having multiple material paginations within a single component

Question

Angular does not support the functionality of having multiple material paginations within a single component

I am currently working on creating a component that contains two dataTables, each with a different dataSource. However, I am facing an issue where my Tables are not visible immediately after the component is loaded due to the *ngIf directive being used. Because of this, I cannot utilize ngAfterViewInit(). Instead, I found a solution on Github that was suggested by a user:

private paginator: MatPaginator;
private reportingPaginator: MatPaginator;
private sort: MatSort;
private reportingSort: MatSort;

@ViewChild(MatSort) set matSort(ms: MatSort) {
  this.sort = ms;
  this.reportingSort = ms;
  this.setDataSourceAttributes();
}

@ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
  this.paginator = mp;
  this.reportingPaginator = mp;
  this.setDataSourceAttributes();
}

setDataSourceAttributes() {

    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;

    this.reportingDataSource.paginator = this.reportingPaginator;
    this.reportingDataSource.sort = this.reportingSort;

}

Despite implementing this solution, I am still encountering issues. The pagination does not work when both paginators are included in the @ViewChild(MatPaginator). However, if I include only one of the paginators:

@ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
this.reportingPaginator = mp;
this.setDataSourceAttributes();
}

or

@ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
this.paginator = mp;
this.setDataSourceAttributes();
}

the included paginator works correctly! What steps should I take to ensure that both paginators work as intended?

angular typescript angular-material angular-material2 angular-datatables

Answer 1

Answer №1

When dealing with multiple MatPaginator and MatSort components on a single page, it is important to use the following code snippet:

@ViewChildren(MatPaginator) paginator = new QueryList<MatPaginator>();
@ViewChildren(MatSort) sort = new QueryList<MatSort>();

This code will provide you with a list of MatSort and MatPaginator components in the order they appear on your page. Below is the complete implementation:

import { Component, OnInit, ViewChild, ViewChildren, AfterViewInit, QueryList } from '@angular/core';
import { MatTableDataSource, MatSort, MatPaginator } from '@angular/material';

export interface AssignmentElement {
  assignmentId: number;
  action: string;
  userName: string;
  roleName: string;
  enabled: string;
  createdOn: string;
  createdBy: string;
  modifiedOn: string;
  modifiedBy: string;
  status: string;
}

// Define ASSIGNMENT_ELEMENT_DATA

export interface RoleElement {
  roleId: number;
  action: string;
  roleName: string;
  roleDescription: string;
  createdOn: string;
  createdBy: string;
  modifiedOn: string;
  modifiedBy: string;
  status: string;
}

// Define ROLE_ELEMENT_DATA

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

  dataSource1: MatTableDataSource<AssignmentElement>;
  dataSource2: MatTableDataSource<RoleElement>;
  @ViewChildren(MatPaginator) paginator = new QueryList<MatPaginator>();
  @ViewChildren(MatSort) sort = new QueryList<MatSort>();

  assignmentColumn: string[] = [
    // Columns for AssignmentElement
  ];
  roleColumn: string[] = [
    // Columns for RoleElement
  ];

  constructor() {
    this.dataSource1 = new MatTableDataSource<AssignmentElement>(ASSIGNMENT_ELEMENT_DATA);
    this.dataSource2 = new MatTableDataSource<RoleElement>(ROLE_ELEMENT_DATA);
  }

  ngOnInit() {
  }

  ngAfterViewInit() {
    this.dataSource1.paginator = this.paginator.toArray()[0];
    this.dataSource1.sort = this.sort.toArray()[0];
    this.dataSource2.paginator = this.paginator.toArray()[1];
    this.dataSource2.sort = this.sort.toArray()[1];
  }

}

Answer 2

When dealing with multiple MatPaginator and MatSort components on a single page, it is important to use the following code snippet:

@ViewChildren(MatPaginator) paginator = new QueryList<MatPaginator>();
@ViewChildren(MatSort) sort = new QueryList<MatSort>();

This code will provide you with a list of MatSort and MatPaginator components in the order they appear on your page. Below is the complete implementation:

import { Component, OnInit, ViewChild, ViewChildren, AfterViewInit, QueryList } from '@angular/core';
import { MatTableDataSource, MatSort, MatPaginator } from '@angular/material';

export interface AssignmentElement {
  assignmentId: number;
  action: string;
  userName: string;
  roleName: string;
  enabled: string;
  createdOn: string;
  createdBy: string;
  modifiedOn: string;
  modifiedBy: string;
  status: string;
}

// Define ASSIGNMENT_ELEMENT_DATA

export interface RoleElement {
  roleId: number;
  action: string;
  roleName: string;
  roleDescription: string;
  createdOn: string;
  createdBy: string;
  modifiedOn: string;
  modifiedBy: string;
  status: string;
}

// Define ROLE_ELEMENT_DATA

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

  dataSource1: MatTableDataSource<AssignmentElement>;
  dataSource2: MatTableDataSource<RoleElement>;
  @ViewChildren(MatPaginator) paginator = new QueryList<MatPaginator>();
  @ViewChildren(MatSort) sort = new QueryList<MatSort>();

  assignmentColumn: string[] = [
    // Columns for AssignmentElement
  ];
  roleColumn: string[] = [
    // Columns for RoleElement
  ];

  constructor() {
    this.dataSource1 = new MatTableDataSource<AssignmentElement>(ASSIGNMENT_ELEMENT_DATA);
    this.dataSource2 = new MatTableDataSource<RoleElement>(ROLE_ELEMENT_DATA);
  }

  ngOnInit() {
  }

  ngAfterViewInit() {
    this.dataSource1.paginator = this.paginator.toArray()[0];
    this.dataSource1.sort = this.sort.toArray()[0];
    this.dataSource2.paginator = this.paginator.toArray()[1];
    this.dataSource2.sort = this.sort.toArray()[1];
  }

}

Answer 3

Answer №2

You can also retrieve them using #id:

In the HTML code:

<mat-paginator #categoryPaginator [pageSizeOptions]="[15]" hidePageSize="true" showFirstLastButtons="false"></mat-paginator>

In the component TypeScript file:

@ViewChild('categoryPaginator', { read: MatPaginator }) categoryPaginator: MatPaginator;

UPDATE

Upon further investigation after a comment from gh0st, it appears that the "read" option should be a boolean according to the Angular documentation for ViewChild. I experimented and found that { read: true } does not work, but { read: false } does. However, since false is the default value, omitting it altogether still functions correctly. Therefore, the most concise way to achieve this is:

@ViewChild('categoryPaginator') categoryPaginator: MatPaginator;

I have tested this with three tables/paginators in a single view component and they continue to function as expected.

I speculate that { read: MatPaginator } may actually be interpreted as { read: false }

The Angular documentation provides a basic example of this:

A template reference variable as a string (e.g., query <my-component #cmp></my-component> with @ViewChild('cmp'))

UPDATE-2

In a particular scenario where I had two Material Autocomplete components within one module and required access to the MatAutocomplete trigger for one of them, it seems that specifying { read: MatAutocompleteTrigger } is crucial. Otherwise, it will only return an ElementRef:

@ViewChild('localityAutoComplete', { read: MatAutocompleteTrigger }) trigger: MatAutocompleteTrigger;

Answer 4

You can also retrieve them using #id:

In the HTML code:

<mat-paginator #categoryPaginator [pageSizeOptions]="[15]" hidePageSize="true" showFirstLastButtons="false"></mat-paginator>

In the component TypeScript file:

@ViewChild('categoryPaginator', { read: MatPaginator }) categoryPaginator: MatPaginator;

UPDATE

Upon further investigation after a comment from gh0st, it appears that the "read" option should be a boolean according to the Angular documentation for ViewChild. I experimented and found that { read: true } does not work, but { read: false } does. However, since false is the default value, omitting it altogether still functions correctly. Therefore, the most concise way to achieve this is:

@ViewChild('categoryPaginator') categoryPaginator: MatPaginator;

I have tested this with three tables/paginators in a single view component and they continue to function as expected.

I speculate that { read: MatPaginator } may actually be interpreted as { read: false }

The Angular documentation provides a basic example of this:

A template reference variable as a string (e.g., query <my-component #cmp></my-component> with @ViewChild('cmp'))

UPDATE-2

In a particular scenario where I had two Material Autocomplete components within one module and required access to the MatAutocomplete trigger for one of them, it seems that specifying { read: MatAutocompleteTrigger } is crucial. Otherwise, it will only return an ElementRef:

@ViewChild('localityAutoComplete', { read: MatAutocompleteTrigger }) trigger: MatAutocompleteTrigger;

Answer 5

Answer №3

It's important to exercise caution when utilizing ViewChild alongside an ngIf directive that evaluates to false, as the ViewChild won't grab any values in this scenario.

Answer 6

It's important to exercise caution when utilizing ViewChild alongside an ngIf directive that evaluates to false, as the ViewChild won't grab any values in this scenario.

Angular does not support the functionality of having multiple material paginations within a single component

Answer №1

Answer №2

Answer №3

Similar questions

Narrowing Down State Types

Seeking a guide on how to effectively utilize Angular 6 for consuming REST API and performing CRUD operations

Need to import Vue component TWICE

Discovering the process of reaching service members through an HTML View

Utilizing Angular 10 to Transform a JSON Data into a Custom String for HTML Rendering

Display an error popup if a server issue occurs

Using ngFor in Angular 6 to create a table with rowspan functionality

Seasonal selection tool

Present information in a tabular format upon identifying an individual's ID using Angular

The ERR_ASSERTION error is thrown because the catch clause variable is not an instance of the Error class

PrimeNG Component Containing a Dynamic Dialog Instance

An issue has occurred: Angular2 is reporting that Observable_1.Observable.defer is not recognized as a

Hide Decimal Places with Angular Pipe

Can you help me identify any issues with this code for uploading an image and quickly displaying it in Angular?

Encountering a 404 error while attempting to utilize ng2-charts

Utilize only the necessary components from firebase-admin in Cloud Functions with Typescript

Avoiding Maximum Call Stack Size Exceeded in Observables: Tips and Tricks

I am attempting to incorporate an NPM package as a plugin in my Next.js application in order to prevent the occurrence of a "Module not found: Can't resolve 'child_process'" error

Refreshing the Mat Dialog content when removing items in Angular Material

Effortlessly sending information to the Material UI 'Table' element within a ReactJS application