Angular material MatTableDataSource Serverside pagination not working - datatable

Question

I am new to angular, I am trying to apply material table with pagination and sorting. So, Initially I try with pagination. I stuck with this error. Do anyone help me out with pagination.
the error is:
Property 'subscribe' does not exist on type '() =>
Observable'.
servertable.component.ts
import { Component, OnInit, AfterContentInit, ViewChild } from '#angular/core';
import { MatPaginator, MatTableDataSource } from '#angular/material';
import { UserService } from './user.service';
import { IUser } from './model/IUser';
#Component({
selector: 'app-servertable',
templateUrl: './servertable.component.html',
styleUrls: ['./servertable.component.scss']
})
export class ServertableComponent implements OnInit, AfterContentInit, AfterViewInit {
dataSource: any;
users: IUser[];
displayedColumns = ['name', 'email', 'phone', 'company'];
#ViewChild(MatPaginator) paginator: MatPaginator;
constructor(private service: UserService) { }
ngOnInit() {
this.service.getUser.subscribe(results => this.users = results);
console.dir(this.dataSource);
}
ngAfterContentInit() {
this.dataSource = new MatTableDataSource(this.users);
this.dataSource.paginator = this.paginator;
}
}
user.service.ts
import { Injectable } from '#angular/core';
import { HttpClient} from '#angular/common/http';
import { Observable } from 'rxjs/observable';
import { IUser } from './model/IUser';
#Injectable()
export class UserService {
private serviceUrl = 'https://jsonplaceholder.typicode.com/users';
constructor(private http: HttpClient) { }
getUser(): Observable<IUser[]> {
return this.http.get<IUser[]>(this.serviceUrl);
}
}
servertable.component.html
<div>
<mat-table [dataSource]="dataSource">
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.name}} </mat-cell>
</ng-container>
<ng-container matColumnDef="email">
<mat-header-cell *matHeaderCellDef> E-Mail </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.email}} </mat-cell>
</ng-container>
<ng-container matColumnDef="phone">
<mat-header-cell *matHeaderCellDef> Phone </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.phone}} </mat-cell>
</ng-container>
<ng-container matColumnDef="company">
<mat-header-cell *matHeaderCellDef> Company </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.company.name}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</div>

Answer 1

You are not calling your service method: this.service.getUser.subscribe(results => this.users = results);. You've forgotten to add parentheses on getUser.
Change it to: this.service.getUser().subscribe(results => this.users = results);
There is one more problem: this.users will not yet be available in ngAfterContentInit because the getUser() call is asynchronous. Move the assignment of the table to your subscribe() call. The whole ngOnInit() will look like this:
ngOnInit() {
this.service.getUser().subscribe(results => {
this.users = results;
this.dataSource = new MatTableDataSource(this.users);
this.dataSource.paginator = this.paginator;
});
}