import { HttpClient } from '@angular/common/http' ; import { Component , OnInit , ViewChild } from '@angular/core' ; import { MatPaginator , MatSort } from '@angular/material' ; import { merge , Observable , of as observableOf } from 'rxjs' ; import { catchError , map , startWith , switchMap } from 'rxjs/operators' ; title @ Component ( { selector : 'table-http-example' , styleUrls : [ 'table-http-example.css' ] , templateUrl : 'table-http-example.html' , } ) export class TableHttpExample implements OnInit { displayedColumns : string [ ] = [ 'created' , 'state' , 'number' , 'title' ] ; exampleDatabase : ExampleHttpDao | null ; data : GithubIssue [ ] = [ ] ; resultsLength = 0 ; isLoadingResults = true ; isRateLimitReached = false ; @ ViewChild ( MatPaginator ) paginator : MatPaginator ; @ ViewChild ( MatSort ) sort : MatSort ; constructor ( private http ) { } ngOnInit ( ) { this . exampleDatabase = new ExampleHttpDao ( this . http ) ; this . sort . sortChange . subscribe ( ( ) => this . paginator . pageIndex = 0 ) ; merge ( this . sort . sortChange , this . paginator . page ) . pipe ( startWith ( { } ) , switchMap ( ( ) => { this . isLoadingResults = true ; return this . exampleDatabase ! . getRepoIssues ( this . sort . active , this . sort . direction , this . paginator . pageIndex ) ; } ) , map ( data => { this . isLoadingResults = false ; this . isRateLimitReached = false ; this . resultsLength = data . total_count ; return data . items ; } ) , catchError ( ( ) => { this . isLoadingResults = false ; this . isRateLimitReached = true ; return observableOf ( [ ] ) ; } ) ) . subscribe ( data => this . data = data ) ; } } export interface GithubApi { items : GithubIssue [ ] ; total_count : number ; } export interface GithubIssue { created_at : string ; number : string ; state : string ; title : string ; } /** An example database that the data source uses to retrieve data for the table. */ export class ExampleHttpDao { constructor ( private http ) { } getRepoIssues ( sort , order , page ) { const href = 'https://api.github.com/search/issues' ; const requestUrl = `${ href }?q=repo:angular/material2&sort=${ sort }&order=${ order }&page=${ page + 1 }` ; return this . http . get < GithubApi > ( requestUrl ) ; } }