Created
November 21, 2017 13:53
-
-
Save zer0id0/8e676da5c66b8d8d32773d5d836c99c7 to your computer and use it in GitHub Desktop.
material table linke to Api
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Observable } from 'rxjs/Rx'; | |
import { MdPaginator } from '@angular/material'; | |
import { DataSource } from '@angular/cdk/collections'; | |
import { ApiHelperService } from './../../../_services/api-helper.service'; | |
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; | |
import { Injectable } from '@angular/core'; | |
import { Http } from '@angular/http'; | |
import 'rxjs/add/observable/merge'; | |
import 'rxjs/add/operator/map'; | |
// INTERFACE | |
export interface Other { | |
userId: number; | |
id: number; | |
title: string; | |
} | |
// ------------------------------------- | |
// DATABASE | |
// ------------------------------------- | |
@Injectable() | |
export class otherDB { | |
dataChange: BehaviorSubject<Other[]> = new BehaviorSubject<Other[]>([]); | |
get data(): Other[] { return this.dataChange.value; } | |
// --- VARS | |
dataCount = 0; | |
constructor ( | |
private api: ApiHelperService | |
) {} | |
// --- TABLE CLEAR | |
private clearTable(): void { | |
this.data.splice(0); | |
this.dataChange.next(this.data.slice()); | |
} | |
// --- ADD DATA TO TABLE | |
public addDataToTable(info: any): void { | |
info.forEach(info => { | |
const DATA: Other[] = this.data.slice(); | |
DATA.push({ | |
userId:info.userId, | |
id: info.id, | |
title: info.title | |
}); | |
this.dataChange.next(DATA); | |
}); | |
} | |
} | |
// ------------------------------------- | |
// TABLE DATA SOURCE | |
// ------------------------------------- | |
export class TableDataSource extends DataSource<any> { | |
constructor( | |
private otherDB: otherDB | |
) { | |
super(); | |
} | |
connect(): Observable<Other[]> { | |
const displayDataChanges = [ | |
this.otherDB.dataChange, | |
]; | |
return Observable.merge(...displayDataChanges).map(() => { | |
const data = this.otherDB.data.slice(); | |
return data.splice(0); | |
}); | |
} | |
disconnect() {} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h1>Hi from Other Component</h1> | |
<div class="example-container mat-elevation-z8"> | |
<md-progress-bar *ngIf="isLoadingData" mode="indeterminate" style="margin-bottom:20px;"></md-progress-bar> | |
<md-table #table [dataSource]="dataSource"> | |
<!-- Name Column --> | |
<ng-container mdColumnDef="userId"> | |
<md-header-cell *mdHeaderCellDef> Name </md-header-cell> | |
<md-cell *mdCellDef="let element"> {{element.userId}} </md-cell> | |
</ng-container> | |
<!-- Height Column --> | |
<ng-container mdColumnDef="id"> | |
<md-header-cell *mdHeaderCellDef> ID </md-header-cell> | |
<md-cell *mdCellDef="let element"> {{element.id}} </md-cell> | |
</ng-container> | |
<!-- Skin Color Column --> | |
<ng-container mdColumnDef="title"> | |
<md-header-cell *mdHeaderCellDef> Title </md-header-cell> | |
<md-cell *mdCellDef="let element"> {{element.title}} </md-cell> | |
</ng-container> | |
<md-header-row *mdHeaderRowDef="displayedColumns"></md-header-row> | |
<md-row *mdRowDef="let row; columns: displayedColumns;"></md-row> | |
</md-table> | |
</div> | |
<!-- <div class="example-container mat-elevation-z8"> | |
--> | |
<!-- </div> --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
h1{ | |
font-size: 2rem; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {Component} from '@angular/core'; | |
import { DataSource } from '@angular/cdk/collections'; | |
import { otherDB, TableDataSource } from './other-db.component'; | |
import { ApiHelperService } from './../../../_services/api-helper.service'; | |
@Component ({ | |
selector: 'sms-other', | |
templateUrl: './other.component.html' , | |
styleUrls:['./other.component.scss'], | |
providers: [otherDB] | |
}) | |
export class OtherComponent { | |
constructor( | |
private otherDB: otherDB, | |
private _api: ApiHelperService | |
) {} | |
public isLoadingData = false; | |
dataSource: TableDataSource | null; | |
// --- COLUMNS DISPLAYED IN TABLE | |
private displayedColumns: Array<string> = [ | |
'userId', | |
'id', | |
'title', | |
]; | |
// --- GET SITES PAGE | |
private getSampleData(): void { | |
this.isLoadingData = true; | |
this._api.get('https://jsonplaceholder.typicode.com/posts') | |
.subscribe(info => { | |
console.log(info) | |
const data = info.map(info => { | |
return { | |
userId:info.userId, | |
id: info.id, | |
title: info.title | |
}; | |
}); | |
this.otherDB.addDataToTable(data); | |
setTimeout( () => { | |
this.isLoadingData = false; | |
}, 1000) | |
}); | |
}j | |
ngOnInit() { | |
this.dataSource = new TableDataSource(this.otherDB); | |
this.getSampleData(); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment