I am new to angular, and I tried to create a table with pagination. I want to add a pagination component to that table, but my code did not work correctly. The problem is, the number of items which is displayed on the table did not change when I changed the "item per page". Can anyone help me to find the problem?
table.component.ts:
import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { MatSort, MatTableDataSource } from '@angular/material';
import { PaginationComponent } from '../pagination/pagination.component';
import {PageEvent} from '@angular/material';
export interface Student {
firstName: string;
position: number;
mathScore: number;
lastName: string;
}
const arrayOfStudents: Student[] = [
{ position: 1, firstName: 'Sarah', lastName: 'Williams', mathScore: 12},
{ position: 2, firstName: 'Peter', lastName: 'Jones', mathScore: 15.5},
{ position: 3, firstName: 'Susan', lastName: 'Anderson', mathScore: 18},
{ position: 4, firstName: 'Jack', lastName: 'Green', mathScore: 14},
{ position: 5, firstName: 'Emma', lastName: 'Smith', mathScore: 20},
{ position: 6, firstName: 'Linda', lastName: 'Johnson', mathScore: 13},
{ position: 7, firstName: 'Robert', lastName: 'Brown', mathScore: 11.75},
{ position: 8, firstName: 'Michael', lastName: 'Miller', mathScore: 17},
{ position: 9, firstName: 'Elizabeth', lastName: 'Lopez', mathScore: 17.5},
{ position: 10, firstName: 'Frank', lastName: 'Thomas', mathScore: 19}
];
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {
displayedColumns: string[] = ['position', 'firstName', 'lastName', 'mathScore'];
dataSource = new MatTableDataSource<Student>(arrayOfStudents);
@ViewChild(MatSort) sort: MatSort;
@ViewChild( PaginationComponent )
private paginationComponent:PaginationComponent;
@Input() length: 100;
@Input() pageSize: 5;
@Input() pageSizeOptions: [5, 10, 25, 100];
@Input() pageEvent: PageEvent;
setPageSizeOptions(setPageSizeOptionsInput: string) {
this.paginationComponent.pageSizeOptions = setPageSizeOptionsInput.split(',').map(str => +str);
}
applyFilter(filterValue: string) {
this.dataSource.filter = filterValue.trim().toLowerCase();
}
ngOnInit() {
this.dataSource.sort = this.sort;
}
}
table.component.html:
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<div class="mat-elevation-z8">
<table mat-table [dataSource] = "dataSource" matSort>
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<!-- First Name Column -->
<ng-container matColumnDef="firstName">
<th mat-header-cell *matHeaderCellDef mat-sort-header> First Name </th>
<td mat-cell *matCellDef="let element"> {{element.firstName}} </td>
</ng-container>
<!-- Last Name Column -->
<ng-container matColumnDef="lastName">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Last Name </th>
<td mat-cell *matCellDef="let element"> {{element.lastName}} </td>
</ng-container>
<!-- Math Score Column -->
<ng-container matColumnDef="mathScore">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Math Score </th>
<td mat-cell *matCellDef="let element"> {{element.mathScore}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<app-pagination (pageSizeOptions)='setPageSizeOptions($event)' ></app-pagination>
</div>
pagination.component.ts:
import { Component, OnInit } from '@angular/core';
import {PageEvent} from '@angular/material';
@Component({
selector: 'app-pagination',
templateUrl: './pagination.component.html',
styleUrls: ['./pagination.component.css']
})
export class PaginationComponent implements OnInit {
// MatPaginator Inputs
length = 100;
pageSize = 5;
pageSizeOptions = [5, 10, 25, 100];
// MatPaginator Output
pageEvent: PageEvent;
constructor() { }
ngOnInit() {
}
}
pagination.component.html:
<mat-paginator [length]="length"
[pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions"
(page)="pageEvent = $event">
</mat-paginator>
<div *ngIf="pageEvent">
<h5>Page Change Event Properties</h5>
<div>List length: {{pageEvent.length}}</div>
<div>Page size: {{pageEvent.pageSize}}</div>
<div>Page index: {{pageEvent.pageIndex}}</div>
</div>
I think that because dataSource
and paginator
are not connected.
if you saw Material example before; you will noticed that MatTableDataSource
has paginator
property likewise sort
property.
So, you have to set paginator
property value of dataSource
object with your paginator child object.
like this:
pagination.component.ts:
@ViewChild(MatPaginator) paginator: MatPaginator;
table.component.ts:
ngOnInit() {
// because the object is in the child component
this.dataSource.paginator = this.paginationComponent.paginator;
this.dataSource.sort = this.sort;
}
That should works.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.