Implementing Material Table with api call Angular - node.js

Question

I have been developing an application with Angular 2 and it has admittedly been a struggle doing so as a new developer. I've managed quite a bit so far but I do need some assistance. I'm including a plunkr that I'm using for reference to get a Material Table with pagination, filter and sort, but this example, as well as all of the other examples on material.angular.io show an example with a database that's essentially hardcoded/generated in the component class. I have a service that calls the api for an SQL query and I'd like to populate the table in the example with that, however my attempts so far have been miserable failures and I think I've overwhelmed myself in the process.
By request I can post my component code, but I fear that I've gutted/revised it beyond the point of any use. But until then below is the plunkr with what I want to implement, and the service class I'd like to use to populate the data table in place of the plunkr's database and data source.
Please let me know if you can help, you'd be saving me a huge headache.
https://plnkr.co/edit/EU3BBlViWpPf2NJW4PXx?p=preview
My service
import { Injectable } from '#angular/core';
import { Http } from '#angular/http';
import 'rxjs/add/operator/map';
#Injectable()
export class RcgqueueService {
constructor(private http: Http) { }
populateRCGQueue() {
return this.http.get('/api/rcgqueue').map(res => res.json());
}
}
And my current pathetic attempt at the component code
import { Component, ElementRef, ViewChild, OnInit, forwardRef } from '#angular/core';
import { DataSource, SelectionModel } from '#angular/cdk/collections';
import { MatPaginator, MatSort, MatTable } from '#angular/material';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/debounceTime';
import { RcgqueueService } from './rcgqueue.service';
#Component({
selector: 'app-rcgqueue',
templateUrl: './rcgqueue.component.html',
styleUrls: ['./rcgqueue.component.css']
})
export class RcgqueueComponent implements OnInit {
isDataAvailable = false;
displayedColumns = ['changeId', 'changeTitle', 'dateSubmitted', 'changeSponsor', 'changeDescription'];
dataChange: BehaviorSubject<ChangeData[]> = new BehaviorSubject<ChangeData[]>([]);
get data(): ChangeData[] { return this.dataChange.value; }
dataSource: ExampleDataSource | null;
#ViewChild(MatPaginator) paginator: MatPaginator;
#ViewChild(forwardRef(() => MatSort)) sort: MatSort;
#ViewChild('filter') filter: ElementRef;
constructor(private rcgservice: RcgqueueService) {
}
populateRCGQueue() {
this.rcgservice.populateRCGQueue().subscribe(rcgitems => {
this.dataChange = rcgitems;
this.isDataAvailable = true;
})
}
ngOnInit() {
this.populateRCGQueue();
this.dataSource = new ExampleDataSource(this, this.paginator, this.sort);
Observable.fromEvent(this.filter.nativeElement, 'keyup')
.debounceTime(150)
.distinctUntilChanged()
.subscribe(() => {
if (!this.dataSource) { return; }
this.dataSource.filter = this.filter.nativeElement.value;
});
}
}
export interface ChangeData {
ChangeId: string;
ChangeTitle: string;
DateSubmitted: string;
ChangeSponsor: string;
ChangeDescription: string;
}
/**
* Data source to provide what data should be rendered in the table. Note that the data source
* can retrieve its data in any way. In this case, the data source is provided a reference
* to a common data base, ExampleDatabase. It is not the data source's responsibility to manage
* the underlying data. Instead, it only needs to take the data and send the table exactly what
* should be rendered.
*/
export class ExampleDataSource extends DataSource<any> {
_filterChange = new BehaviorSubject('');
get filter(): string { return this._filterChange.value; }
set filter(filter: string) { this._filterChange.next(filter); }
dataChange: BehaviorSubject<ChangeData[]> = new BehaviorSubject<ChangeData[]>([]);
get data(): ChangeData[] { return this.dataChange.value; }
filteredData: ChangeData[] = [];
renderedData: ChangeData[] = [];
constructor(private rcgcomponent: RcgqueueComponent,
private _paginator: MatPaginator,
private _sort: MatSort) {
super();
this._filterChange.subscribe(() => this._paginator.pageIndex = 0);
}
/** Connect function called by the table to retrieve one stream containing the data to render. */
connect(): Observable<ChangeData[]> {
// Listen for any changes in the base data, sorting, filtering, or pagination
const displayDataChanges = [
this.rcgcomponent.dataChange,
this._sort.sortChange,
this._filterChange,
this._paginator.page,
];
return Observable.merge(...displayDataChanges).map(() => {
// Filter data
this.filteredData = this.rcgcomponent.data.slice().filter((item: ChangeData) => {
const searchStr = (item.ChangeDescription + item.ChangeSponsor).toLowerCase();
return searchStr.indexOf(this.filter.toLowerCase()) !== -1;
});
// Sort filtered data
const sortedData = this.sortData(this.filteredData.slice());
// Grab the page's slice of the filtered sorted data.
const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
this.renderedData = sortedData.splice(startIndex, this._paginator.pageSize);
return this.renderedData;
});
}
disconnect() { }
/** Returns a sorted copy of the database data. */
sortData(data: ChangeData[]): ChangeData[] {
if (!this._sort.active || this._sort.direction === '') { return data; }
return data.sort((a, b) => {
let propertyA: number | string = '';
let propertyB: number | string = '';
switch (this._sort.active) {
case 'changeId': [propertyA, propertyB] = [a.ChangeId, b.ChangeId]; break;
case 'changeTitle': [propertyA, propertyB] = [a.ChangeTitle, b.ChangeTitle]; break;
case 'dateSubmitted': [propertyA, propertyB] = [a.DateSubmitted, b.DateSubmitted]; break;
case 'changeSponsor': [propertyA, propertyB] = [a.ChangeSponsor, b.ChangeSponsor]; break;
case 'changeDescription': [propertyA, propertyB] = [a.ChangeDescription, b.ChangeDescription]; break;
}
const valueA = isNaN(+propertyA) ? propertyA : +propertyA;
const valueB = isNaN(+propertyB) ? propertyB : +propertyB;
return (valueA < valueB ? -1 : 1) * (this._sort.direction === 'asc' ? 1 : -1);
});
}
}
I've removed anything having to do with selection from the table from the plunkr code, what is left here is where I am currently. I'm very sorry if this ends up more hindering than helpful.
Oh and this may be helpful, my api.js on the server side with the query I'm using. (The only one so far)
const express = require('express');
const async = require('async');
const jwt = require('jsonwebtoken');
const shape = require('shape-json');
const router = express.Router();
var sql = require('mssql/msnodesqlv8');
var config = {
driver: 'msnodesqlv8',
connectionString: 'Driver=SQL Server Native Client 11.0;Server=localhost;Database=Change;Trusted_Connection=yes;',
}
var conn = new sql.ConnectionPool(config);
conn.connect().then(function() {
log("Change Governance Database Connection opened");
}).catch(function (err) {
console.error(new Date() + " - Issue connecting to the MS SQL database.", err);
});
router.get('/', (req, res) => {
res.send('api works');
});
router.get('/rcgqueue', (req, res) => {
new sql.Request(conn)
.query('SELECT ChangeId, ChangeTitle, DateSubmitted, ChangeSponsor, ChangeDescription FROM dbo.ChangeEvaluationForm;')
.then(function(recordset) {
log("Successful query request for RCG Records.");
res.send(recordset.recordset);
}).catch(function(err) {
log(err);
res.send("Issue querying database!");
});
});
/********************************/
/* Functions */
/********************************/
// Log lines with date/time for server
function log(msg) {
console.log(new Date() + " - " + msg);
};
module.exports = router;
EDIT: Adding template and errors.
Template
<!-- Issues
https://github.com/angular/angular/issues/16614
https://github.com/angular/angular/issues/17572 -->
<div *ngIf="isDataAvailable">
<div class="example-container mat-elevation-z8">
<div class="example-header">
<md-input-container floatPlaceholder="never">
<input mdInput #filter placeholder="Filter">
</md-input-container>
</div>
<md-table #table [dataSource]="dataSource" mdSort>
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- ChangeId Column -->
<ng-container cdkColumnDef="changeId">
<md-header-cell *cdkHeaderCellDef md-sort-header> ChangeId </md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.ChangeId}} </md-cell>
</ng-container>
<!-- ChangeTitle Column -->
<ng-container cdkColumnDef="changeTitle">
<md-header-cell *cdkHeaderCellDef md-sort-header> Change Title </md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.ChangeTitle}}% </md-cell>
</ng-container>
<!-- DateSubmitted -->
<ng-container cdkColumnDef="dateSubmitted">
<md-header-cell *cdkHeaderCellDef md-sort-header> Date Submitted </md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.DateSubmitted}} </md-cell>
</ng-container>
<!-- ChangeSponsor -->
<ng-container cdkColumnDef="changeSponsor">
<md-header-cell *cdkHeaderCellDef md-sort-header> Change Sponsor </md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.ChangeSponsor}} </md-cell>
</ng-container>
<!-- ChangeDescription -->
<ng-container cdkColumnDef="changeDescription">
<md-header-cell *cdkHeaderCellDef md-sort-header> Change Description </md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.ChangeDescription}} </md-cell>
</ng-container>
<md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
<md-row *cdkRowDef="let row; columns: displayedColumns;">
</md-row>
</md-table>
<div class="example-no-results" [style.display]="dataSource.renderedData.length == 0 ? '' : 'none'">
No changes found matching filter.
</div>
<md-paginator #paginator [length]="dataSource.filteredData.length" [pageIndex]="0" [pageSize]="25" [pageSizeOptions]="[5, 10, 25, 100]">
</md-paginator>
</div>
</div>
And finally a screenshot of my errors

Answer 1

The reason why you are getting
Cannot set property pageIndex of undefined
is that you wrap table in *ngIf and by the time you pass #ViewChilds to DataSource class they are not initialized yet.
I solved it by calling initialization after getting data:
this.rcgservice.populateRCGQueue().subscribe(rcgitems => {
this.dataChange.next(rcgitems);
this.isDataAvailable = true;
this.cdRef.detectChanges(); // make sure that all ViewChilds were initialized
this.initSource();
Another mistake is that you assign data to BehaviourSubject
this.rcgservice.populateRCGQueue().subscribe(rcgitems => {
this.dataChange = rcgitems;
it should be:
this.dataChange.next(rcgitems);
I also added some safe navigation operators to your template:
[length]="dataSource?.filteredData.length"
and
[style.display]="dataSource?.renderedData.length == 0 ? '' : 'none'"
Plunker Example
If we don't use ngIf then we do not need ChangeDetectorRef anymore
Plunker Example