Run npm install ngbx-data-table
Run import { NgbxDataTableModule } from 'ngbx-data-table';
Add Module to the imports NgbxDataTableModule
` <ngbx-data-table [documents]="documents" [columns]="columns" [limit] = "params.limit" [sortBy] = "params.sortBy" [order] = "params.order" count = "33" [templates] = "{'MoreInfoTemplate':MoreInfoTemplate,'PriceTemplate':PriceTemplate,'SellerTemplate':SellerTemplate}" (refetch)="onRefetch($event)">
<ng-template #PriceTemplate let-document="document"> $ {{document.Price}} <ng-template #SellerTemplate let-document="document"> {{document.SellerCity}}, {{document.SellerState}} <ng-template #MoreInfoTemplate let-document="document"> <a (click)="showMoreInfo(document.ID)" href="/">availability.. `
` url = 'http://5c78b1f83a89af0014cd7109.mockapi.io/test/documents';
documents = [];
params = { page : 1, limit: 5, sortBy: 'FirstName', order: 'asc' }
ngOnInit() { this.fetch(); }
fetch() { const fetchUrl = this.url+'?page='+this.params.page+'&limit='+this.params.limit+'&sortBy='+this.params.sortBy+'&order='+this.params.order; this.http.get(fetchUrl).subscribe( response => { this.documents = <any[]>(response); console.log(this.documents); } ); }
columns = [ {'name':'Name', 'label':'Product', 'sortable':true}, {'name':'Price', 'label':'Price', 'sortable':true, template:'PriceTemplate'}, {'name':'Color', 'label':'Color', 'sortable':false}, {'name':'SellerCity', 'label':'Ships From', 'sortable':false, template:'SellerTemplate'}, {'name':'ID', 'label':'More Info', 'sortable':false, template:'MoreInfoTemplate'} ];
onRefetch(event) { this.params = event.params; this.fetch(); }
showMoreInfo(id) {
alert(This Product is only available until Until ${this.documents.filter(function(document) { return document.ID == id; })[0].AvailableUntil}
);
}
`
This library was generated with Angular CLI version 7.2.0.
Run ng generate component component-name --project ngbx-data-table
to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project ngbx-data-table
.
Note: Don't forget to add
--project ngbx-data-table
or else it will be added to the default project in yourangular.json
file.
Run ng build ngbx-data-table
to build the project. The build artifacts will be stored in the dist/
directory.
After building your library with ng build ngbx-data-table
, go to the dist folder cd dist/ngbx-data-table
and run npm publish
.
Run ng test ngbx-data-table
to execute the unit tests via Karma.
To get more help on the Angular CLI use ng help
or go check out the Angular CLI README.