diff --git a/demo/src/app/advanced/using-ng-pipe.component.spec.ts b/demo/src/app/advanced/using-ng-pipe.component.spec.ts index f1ca060f..3a810b96 100644 --- a/demo/src/app/advanced/using-ng-pipe.component.spec.ts +++ b/demo/src/app/advanced/using-ng-pipe.component.spec.ts @@ -8,7 +8,7 @@ import { BaseDemoComponent } from '../base-demo/base-demo.component'; import { AppRoutingModule } from '../app.routing'; import { FormsModule } from '@angular/forms'; import { UsingNgPipeComponent } from './using-ng-pipe.component'; -import { UpperCasePipe } from '@angular/common'; +import { UpperCasePipe, CurrencyPipe } from '@angular/common'; import { By } from '@angular/platform-browser'; import { Person } from 'app/person'; @@ -37,7 +37,8 @@ describe('UsingNgPipeComponent', () => { ], schemas: [NO_ERRORS_SCHEMA], providers: [ - UpperCasePipe + UpperCasePipe, + CurrencyPipe ] }).createComponent(UsingNgPipeComponent); @@ -74,14 +75,42 @@ describe('UsingNgPipeComponent', () => { expect(testsArray.map(index => { const dataRow = rows[index]; - const firstNameFromData = (instance.row(dataRow).data() as Person).firstName; + const firstNameFromData = (instance.row(dataRow).data() as Person).firstName; const firstNameFromTable = $('td:nth-child(2)', dataRow).text(); - const lastNameFromData = (instance.row(dataRow).data() as Person).lastName; + const lastNameFromData = (instance.row(dataRow).data() as Person).lastName; const lastNameFromTable = $('td:nth-child(3)', dataRow).text(); return firstNameFromTable === firstNameFromData.toUpperCase() && lastNameFromTable === lastNameFromData.toUpperCase(); })) - .toEqual(expectedArray); + .toEqual(expectedArray); + }); + + + it('should have money on id column', async () => { + const app = fixture.debugElement.componentInstance as UsingNgPipeComponent; + await fixture.whenStable(); + + const query = fixture.debugElement.query(By.directive(DataTableDirective)); + const dir = query.injector.get(DataTableDirective); + expect(dir).toBeTruthy(); + + const instance = await dir.dtInstance; + + const rows = fixture.nativeElement.querySelectorAll('tbody tr'); + + const testsArray = [0, 3, 6]; + const expectedArray = testsArray.map(_ => true); + + expect(testsArray.map(index => { + const dataRow = rows[index]; + + const pipeInstance = app.pipeCurrencyInstance; + + const IdFromData = (instance.row(dataRow).data() as Person).id; + const IdFromTable = $('td:nth-child(1)', dataRow).text(); + return IdFromTable === pipeInstance.transform(IdFromData,'USD','symbol'); + })) + .toEqual(expectedArray); }); }); diff --git a/demo/src/app/advanced/using-ng-pipe.component.ts b/demo/src/app/advanced/using-ng-pipe.component.ts index 16e4c7e5..d6d2e2fb 100644 --- a/demo/src/app/advanced/using-ng-pipe.component.ts +++ b/demo/src/app/advanced/using-ng-pipe.component.ts @@ -1,4 +1,4 @@ -import { UpperCasePipe } from '@angular/common'; +import { CurrencyPipe, UpperCasePipe } from '@angular/common'; import { Component, OnInit } from '@angular/core'; import { ADTSettings } from 'angular-datatables/src/models/settings'; @@ -9,7 +9,8 @@ import { ADTSettings } from 'angular-datatables/src/models/settings'; export class UsingNgPipeComponent implements OnInit { constructor( - private pipeInstance: UpperCasePipe + private pipeInstance: UpperCasePipe, + public pipeCurrencyInstance: CurrencyPipe ) { } pageTitle = 'Using Angular Pipe'; @@ -26,8 +27,10 @@ export class UsingNgPipeComponent implements OnInit { ajax: 'data/data.json', columns: [ { - title: 'ID', - data: 'id' + title: 'Id (Money)', + data: 'id', + ngPipeInstance: this.pipeCurrencyInstance, + ngPipeArgs: ['USD','symbol'] }, { title: 'First name', @@ -41,6 +44,7 @@ export class UsingNgPipeComponent implements OnInit { } ] }; + } } diff --git a/demo/src/app/app.module.ts b/demo/src/app/app.module.ts index 6a3bcbcb..0a14f13f 100644 --- a/demo/src/app/app.module.ts +++ b/demo/src/app/app.module.ts @@ -37,7 +37,7 @@ import { SelectExtensionComponent } from './extensions/select-extension.componen import { UsingNgPipeComponent } from './advanced/using-ng-pipe.component'; // Using Angular Pipe -import { UpperCasePipe } from '@angular/common'; +import { CurrencyPipe, UpperCasePipe } from '@angular/common'; // Markdown import { MarkdownModule } from 'ngx-markdown'; @@ -47,52 +47,53 @@ import { UsingNgTemplateRefComponent } from './advanced/using-ng-template-ref.co import { DemoNgComponent } from './advanced/demo-ng-template-ref.component'; @NgModule({ - declarations: [ - AppComponent, - WelcomeComponent, - GettingStartedComponent, - PersonComponent, + declarations: [ + AppComponent, + WelcomeComponent, + GettingStartedComponent, + PersonComponent, - ZeroConfigComponent, - WithOptionsComponent, - WithAjaxComponent, - AngularWayComponent, - ServerSideAngularWayComponent, + ZeroConfigComponent, + WithOptionsComponent, + WithAjaxComponent, + AngularWayComponent, + ServerSideAngularWayComponent, - CustomRangeSearchComponent, - DtInstanceComponent, - IndividualColumnFilteringComponent, - LoadDtOptionsWithPromiseComponent, - RerenderComponent, - RowClickEventComponent, - MultipleTablesComponent, - RouterLinkComponent, + CustomRangeSearchComponent, + DtInstanceComponent, + IndividualColumnFilteringComponent, + LoadDtOptionsWithPromiseComponent, + RerenderComponent, + RowClickEventComponent, + MultipleTablesComponent, + RouterLinkComponent, - ButtonsExtensionComponent, - ColreorderExtensionComponent, - ResponsiveExtensionComponent, - SelectExtensionComponent, - UsingNgPipeComponent, - BaseDemoComponent, - FAQComponent, - UsingNgTemplateRefComponent, - DemoNgComponent - ], - imports: [ - BrowserModule, - FormsModule, - HttpClientModule, - DataTablesModule, - AppRoutingModule, - MarkdownModule.forRoot( - { - sanitize: SecurityContext.NONE - } - ) - ], - providers: [ - UpperCasePipe - ], - bootstrap: [AppComponent] + ButtonsExtensionComponent, + ColreorderExtensionComponent, + ResponsiveExtensionComponent, + SelectExtensionComponent, + UsingNgPipeComponent, + BaseDemoComponent, + FAQComponent, + UsingNgTemplateRefComponent, + DemoNgComponent + ], + imports: [ + BrowserModule, + FormsModule, + HttpClientModule, + DataTablesModule, + AppRoutingModule, + MarkdownModule.forRoot( + { + sanitize: SecurityContext.NONE + } + ) + ], + providers: [ + UpperCasePipe, + CurrencyPipe + ], + bootstrap: [AppComponent] }) export class AppModule { } diff --git a/demo/src/assets/docs/advanced/using-ng-pipe/source-ts.md b/demo/src/assets/docs/advanced/using-ng-pipe/source-ts.md index b8f65926..ffb91e5e 100644 --- a/demo/src/assets/docs/advanced/using-ng-pipe/source-ts.md +++ b/demo/src/assets/docs/advanced/using-ng-pipe/source-ts.md @@ -2,12 +2,13 @@ // app.module.ts ..., providers: [ - UpperCasePipe // declare your Pipe here + UpperCasePipe, + CurrencyPipe // declare your Pipe here ], // using-ng-pipe.component -import { UpperCasePipe } from '@angular/common'; +import { UpperCasePipe, CurrencyPipe } from '@angular/common'; import { Component, OnInit } from '@angular/core'; import { ADTSettings } from 'angular-datatables/src/models/settings'; @@ -18,7 +19,8 @@ import { ADTSettings } from 'angular-datatables/src/models/settings'; export class UsingNgPipeComponent implements OnInit { constructor( - private pipeInstance: UpperCasePipe // inject the Pipe + private pipeInstance: UpperCasePipe, // inject the Pipe + private pipeCurrencyInstance: CurrencyPipe // inject the Pipe ) { } dtOptions: ADTSettings = {}; @@ -29,21 +31,24 @@ export class UsingNgPipeComponent implements OnInit { ajax: 'data/data.json', columns: [ { - title: 'ID', - data: 'id' + title: 'Id (Money)', + data: 'id', + ngPipeInstance: this.pipeCurrencyInstance, + ngPipeArgs: ['USD','symbol'] }, { title: 'First name', data: 'firstName', - ngPipeInstance: this.pipeInstance // pipe is referred here + ngPipeInstance: this.pipeInstance }, { title: 'Last name', data: 'lastName', - ngPipeInstance: this.pipeInstance // pipe is referred here + ngPipeInstance: this.pipeInstance } ] }; + } } diff --git a/src/angular-datatables.directive.ts b/src/angular-datatables.directive.ts index 476011d2..74770f82 100644 --- a/src/angular-datatables.directive.ts +++ b/src/angular-datatables.directive.ts @@ -106,13 +106,14 @@ export class DataTableDirective implements OnDestroy, OnInit { const colsWithPipe = columns.filter(x => x.ngPipeInstance && !x.ngTemplateRef); colsWithPipe.forEach(el => { const pipe = el.ngPipeInstance; + const pipeArgs = el.ngPipeArgs || []; // find index of column using `data` attr const i = columns.findIndex(e => e.data === el.data); // get