After implementing pagination and following the guidelines provided here.
This is my code from the app.component.ts file -
import { Component, OnInit, ViewChild } from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import { ApiServicefile, User } from './api.service';
import {MatTableDataSource} from '@angular/material/table';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
error: any;
title = 'toms-app';
users = new MatTableDataSource<User>();
displayedColumns: string[] = ['firstName', 'lastName', 'username', 'email'];
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
constructor(private apiServicefile: ApiServicefile) { }
ngOnInit(): void {
this.apiServicefile.getUser()
.subscribe(
(data: User) => this.users = data,
error => this.error = error
);
}
ngAfterViewInit(){
this.users.paginator = this.paginator;
}
}
Previously in the HTML file, the material table was populated by users: User
<table mat-table [dataSource]="users">
An issue has arisen with this line for this.users:
(data: User) => this.users = data,
ERROR in src/app/app.component.ts(27,23): error TS2322: Type 'User' is not assignable to type 'MatTableDataSource<User>'.
src/app/app.component.ts(27,23): error TS2740: Type 'User' is missing the following properties from type 'MatTableDataSource<User>': _data, _renderData, _filter, _internalPageChanges, and 18 more.
Troubleshooting efforts have been made but yet to resolve the issue.
UPDATE(TS file changed, no errors but pagination remains non-functional):
import { Component, OnInit, ViewChild } from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import { ApiServicefile, User } from './api.service';
import {MatTableDataSource} from '@angular/material/table';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
error: any;
title = 'toms-app';
users: User;
dataSource = new MatTableDataSource<User>();
displayedColumns: string[] = ['firstName', 'lastName', 'username', 'email'];
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
constructor(private apiServicefile: ApiServicefile) { }
ngOnInit(): void {
this.apiServicefile.getUser()
.subscribe(
(data: User) => this.users = data, // success path
error => this.error = error // error path
);
}
ngAfterViewInit(){
this.dataSource.paginator = this.paginator;
}
}