add ngPipeArgs

Author: adrien-syrotnik

demo/package.json

@@ -21,7 +21,7 @@
     "@angular/platform-browser": "^13.0.1",
     "@angular/platform-browser-dynamic": "^13.0.1",
     "@angular/router": "^13.0.1",
-    "angular-datatables": "^12.0.1",
+    "angular-datatables": "^13.1.0",
     "clipboard": "^2.0.8",
     "core-js": "^3.19.1",
     "datatables.net": "^1.11.3",

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,44 @@ 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];
+
+      let pipeInstance = app.pipeCurrencyInstance;
+
+      const NumberFromData = (instance.row(dataRow).data() as Person).id;
+      const NumberFromTable = $('td:nth-child(1)', dataRow).text();
+      console.log(NumberFromData)
+      console.log(NumberFromTable)
+      return NumberFromTable === pipeInstance.transform(NumberFromData,'USD','symbol');
+    }))
+      .toEqual(expectedArray);
   });
 
 });

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 {
         }
       ]
     };
+
   }
 
 }

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 { }

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
         }
       ]
     };
+
   }
 }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-datatables",
-  "version": "13.0.1",
+  "version": "13.1.0",
   "description": "Angular directive for DataTables",
   "scripts": {
     "build": "npm run clean && npm run compile && npm run bundles && npm run schematics:build",

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 ? el.ngPipeArgs : [];
       // find index of column using `data` attr
       const i = columns.findIndex(e => e.data === el.data);
       // get <td> element which holds data using index
       const rowFromCol = row.childNodes.item(i);
-      // Transform data with Pipe
+      // Transform data with Pipe and PipeArgs
       const rowVal = $(rowFromCol).text();
-      const rowValAfter = pipe.transform(rowVal);
+      const rowValAfter = pipe.transform(rowVal, ...pipeArgs);
       // Apply transformed string to <td>
       $(rowFromCol).text(rowValAfter);
     });

src/models/settings.ts

@@ -6,6 +6,8 @@ export interface ADTSettings extends DataTables.Settings {
 export interface ADTColumns extends DataTables.ColumnSettings {
   /** Set instance of Angular pipe to transform the data of particular column */
   ngPipeInstance?: PipeTransform;
+  /** Define the arguments for the tranform method of the pipe, to change its behavior */
+  ngPipeArgs?: any[];
   /** Set `TemplateRef` to transform the data of this column */
   ngTemplateRef?: ADTTemplateRef;
 }