angular - set md-paginator values dynamically -
i trying use pagination of angular-material2 . problem facing set values of md-paginator dynamically through service.
i have managed create pagination using static values dont know how set them dynamically. below far.
ts
import {component,changedetectorref, input,viewchild } '@angular/core'; import {http, response, requestoptions, headers, request, requestmethod} '@angular/http'; import {mdpaginator,pageevent} '@angular/material'; import {datasource} '@angular/cdk'; import {behaviorsubject} 'rxjs/behaviorsubject'; import {observable} 'rxjs/observable'; import 'rxjs/add/operator/startwith'; import 'rxjs/add/observable/merge'; import 'rxjs/add/operator/map'; @component({ selector: 'table-http-example', styleurls: ['table-http-example.css'], templateurl: 'table-http-example.html', }) export class tablehttpexample { displayedcolumns = ['dbquery', 'title']; exampledatabase: examplehttpdatabase | null; datasource: exampledatasource | null; pageevent: pageevent; @viewchild(mdpaginator) paginator: mdpaginator; constructor(private http: http) { } ngoninit(){ this.loaddata(); } loaddata(){ this.exampledatabase = new examplehttpdatabase(this.http); this.datasource = new exampledatasource(this.exampledatabase,this.paginator); } onpaginatechange(event){ const startindex = event.pageindex * event.pagesize; this.datasource = new exampledatasource(this.exampledatabase,this.paginator); } } /** example database data source uses retrieve data table. */ export class examplehttpdatabase { private issuesurl = 'https://emgrweb.ecwcloud.com/emanagerweb/rest/interfaceqaclientcontroller/getinterfaceclientscripts'; // url web api getrepoissues(startindex,pagesize): observable<any> { var headers = new headers(); headers.append('content-type', 'text/plain'); var requestoptions = new requestoptions({ method: requestmethod.post, url: this.issuesurl, headers: headers body : "start=" +startindex +"&limit="+ pagesize }) return this.http.request(new request(requestoptions)).map(this.extractdata); } extractdata(result: response): any{ return result.json().data.map(data => { return data }); } onpaginatechange(event){ //alert(json.stringify(event)); const startindex = event.pageindex * event.pagesize; // this.drugmap.getdrugdataforclient(startindex, event.pagesize); this.datasource = new binddatatablesource(this.drugmap,event); } constructor(private http: http) {} } export class exampledatasource extends datasource<any> { constructor(private _exampledatabase: examplehttpdatabase,private _paginator : mdpaginator) { super(); } /** connect function called table retrieve 1 stream containing data render. */ connect(): observable<any[]> { console.log( this._paginator); const startindex = this._paginator.pageindex * this._paginator.pagesize; return this._exampledatabase.getrepoissues(startindex, this._paginator.pagesize); } disconnect() {} } html
<div class="example-container mat-elevation-z8"> <md-table #table [datasource]="datasource"> <ng-container cdkcolumndef="dbquery"> <md-header-cell *cdkheadercelldef> dbquery </md-header-cell> <md-cell *cdkcelldef="let row"> {{row.title}} </md-cell> </ng-container> <ng-container cdkcolumndef="title"> <md-header-cell *cdkheadercelldef> title </md-header-cell> <md-cell *cdkcelldef="let row"> {{row.title}} </md-cell> </ng-container> <md-header-row *cdkheaderrowdef="displayedcolumns"></md-header-row> <md-row *cdkrowdef="let row; columns: displayedcolumns;"></md-row> </md-table> <md-paginator #paginator [length]="100" [pageindex]="0" [pagesize]="10" [pagesizeoptions]="[5, 10, 25, 100]" (page)="pageevent = $event; onpaginatechange($event)" > </md-paginator> </div> tried passing paginator object examplehttpdatabase when console out, says undefined. appreciate help.
p.s - know both columns title.
to change values dynamically, use variables inputs <md-paginator>. when variables change, paginator pick them , render them view.
<md-paginator #paginator [length]="myexamplelength" [pageindex]="myexamplepageindex" [pagesize]="myexamplepagesize" [pagesizeoptions]="myexamplepagesizeoptions" (page)="pageevent = $event; onpaginatechange($event)"> </md-paginator>
Comments
Post a Comment