Material 2 Pagination With Http And DataSource

Found the answer myself. It turns out it was scope (that I wasn't understanding properly).

I can't set a variable directly inside of the Observer to the class. What I can do is to call a method and pass what I need to it. Might look basic but took me a week to arrive here.

So this is how the coded ended up being:

servers-collection.component.ts:

import { Component, OnInit } from '@angular/core';import { ServersService } from "../../../shared/services/servers/servers.service";import { ServersDataSource } from "../../../shared/data-source/server.datasource";@Component({    selector: 'app-servers-collection',    templateUrl: './servers-collection.component.html',    styleUrls: ['./servers-collection.component.css']})export class ServersCollectionComponent implements OnInit {    // Data    displayedColumns = ['id', 'name', 'ipAddress', 'hostName'];    dataSource:ServersDataSource|null;    data:any;    // Pagination    length:number;    pageIndex:number = 1;    pageSize:number = 10;    pageSizeOptions:number[] = [5, 10, 25, 50, 100];    constructor(private _serversService:ServersService) {    }    ngOnInit() {        this.loadData();    }    loadData() {        this.data = this._serversService.getData(this.pageIndex, this.pageSize);        this.data.subscribe(data => {            this.setPagination(data['total_items'], data['page'], data['page_size']);            this.dataSource = new ServersDataSource(data['_embedded']['servers']);        });    }    setPagination(length, startIndex, pageSize) {        this.length = length;        this.pageIndex = startIndex;        this.pageSize = pageSize;    }    onPaginateChange(event) {        this.pageIndex = event.pageIndex;        this.pageSize = event.pageSize;        this.loadData();    }}

server.datasource.ts:

import { DataSource } from '@angular/cdk/collections';import { Observable } from 'rxjs/Observable';import 'rxjs/add/observable/of';import { Server } from "../interfaces/Server";export class ServersDataSource extends DataSource<any> {    constructor(private _servers:Server[]) {        super();    }    connect(): Observable<Server[]> {        return Observable.of(this._servers);    }    disconnect() {}}

servers.service.ts:

import { Injectable } from '@angular/core';import { Http, Response } from '@angular/http';import { Observable } from "rxjs/Observable";import 'rxjs/add/operator/map';@Injectable()export class ServersService {    url:string = 'http://{URL}/servers';    constructor(private http: Http) {    }    getData(startIndex, pageSize): Observable<any> {        return this.http.get(this.url + '?page=' + startIndex + '&limit=' + pageSize)            .map(this.extractData);    }    extractData(result: Response) {        return result.json();    }}

Thanks a lot for this piece of code. I've used paginator like this:

<mat-paginator #pagination [length]="length" [pageSize]="pageSize [pageSizeOptions]="pageSizeOptions" (page)="pageEvent = onPaginationChange($event)"> // instead of loadData($event) </mat-paginator>

I also modified this since first page is indexed as 0 and on my data as 1

 onPaginateChange(event) {    this.pageIndex = event.pageIndex + 1;    this.pageSize = event.pageSize;    this.loadData();}