angular2-mdl table component with server side data

Question

I experiment with Angular 2 - Material Design Lite especially with the table component but I can not figure out how would I pass data from server on ajax request. Here is the example provided for table initialisation. How would I pass data from restAPI to table component?

Answer 1

Here I have a kind of working example. I placed the initial data on my Component Init method where I call the DataService which populates the table. I'm not sure if is the right workaround but at this point I have data in table.

import { Component, ViewChild, ViewContainerRef, OnInit, Pipe, PipeTransform } from '@angular/core';
import { MdDialog, MdDialogConfig, MdIcon } from "@angular/material";
import { AuthenticationService, DialogsService, DataService } from '../../../services/';
import { RouterModule, Routes, Router } from '@angular/router';
import {
    IMdlTableModelItem,
    MdlDefaultTableModel
} from 'angular2-mdl';


export interface ITableItem extends IMdlTableModelItem {
    username: string;
    email: string;
    role: string;
    unitPrice: number;
}

@Component({
    selector: 'employees',
    templateUrl: 'app/layouts/secure/employees/employees.html',
    providers: [DialogsService, MdIcon]
})
export class EmployeesComponent implements OnInit {
    public message: string;
    public employees: any[];
    public result: any;
    public showSearchBar: false;
    public tableData:[ITableItem];
    public selected;

    public tableModel = new MdlDefaultTableModel([
        {key:'username', name:'Username', sortable:true},
        {key:'email', name:'Email', sortable:true},
        {key:'role', name:'Role', sortable:true},
        {key:'status', name:'Status', sortable:true},
        {key:'unitPrice', name:'Test', numeric:true}
    ]);

    constructor(
        private dialogsService: DialogsService,
        public viewContainerRef: ViewContainerRef,
        private _dataService : DataService,
        private router: Router
    ) {
    }
    openDialog() {
        this.dialogsService
            .confirm('User Form', 'Are you sure you want to do this?', this.viewContainerRef)
            .subscribe(res => this.result = res);
    }

    toggleSearch() {
        console.log(this)
    }

    ngOnInit() {
        var self = this;
        this._dataService
            .GetAll('employees')
            .subscribe( data => {
                    data = Object.keys(data).map((key)=>{ return data[key]})
                    this.employees = data;
                    this.tableData  = data;
                    this.tableModel.addAll(this.tableData);

            }, error => console.log(error),
                () => function ( data ) {
                    this.tableData  = this.employees;
                    this.tableModel.addAll(this.tableData);
                    this.selected = this.tableData.filter( data => data.selected);
                },
            );
    }
    generateArray(obj){
        return Object.keys(obj).map((key)=>{ return obj[key]});
    }

    selectionChanged($event){
        this.selected = $event.value;
    }
}

Answer 2

@fefe made it a little more difficult than it had to be, at least with the current version. The magic of the as keyword can do the heavy lifting.

For example my class setup looks like:

import...

export interface IUnreadMessage extends IMdlTableModelItem {
    messageId: number;
    subject: string;
    from: string;
}

@Component ...

export class ...
    private unreadMessagesTable = new MdlDefaultTableModel([
        {key: 'messageId', name: 'Message ID'},
        {key: 'subject', name: 'Subject'},
        {key: 'from', name: 'From'}
    ]); 

Then in my ajax call I have:

 ...ajax call here).subscribe(value => {
    const messages = value as Array<IUnreadMessage>;
    this.unreadMessagesTable.addAll(messages);
  },
  error => {
    ...error handler here...
  });

Make sure your interface is EXACTLY (including case) the same as your returned ajax data and it should hook right up!