Skip to content
This repository was archived by the owner on Feb 2, 2025. It is now read-only.

Add ngPipeArgs to ngPipe property #1642

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 34 additions & 5 deletions demo/src/app/advanced/using-ng-pipe.component.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -37,7 +37,8 @@ describe('UsingNgPipeComponent', () => {
],
schemas: [NO_ERRORS_SCHEMA],
providers: [
UpperCasePipe
UpperCasePipe,
CurrencyPipe
]
}).createComponent(UsingNgPipeComponent);

Expand Down Expand Up @@ -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);
});

});
12 changes: 8 additions & 4 deletions demo/src/app/advanced/using-ng-pipe.component.ts
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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';
Expand All @@ -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',
Expand All @@ -41,6 +44,7 @@ export class UsingNgPipeComponent implements OnInit {
}
]
};

}

}
91 changes: 46 additions & 45 deletions demo/src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 { }
19 changes: 12 additions & 7 deletions demo/src/assets/docs/advanced/using-ng-pipe/source-ts.md
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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 = {};
Expand All @@ -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
}
]
};

}
}

Expand Down
5 changes: 3 additions & 2 deletions src/angular-datatables.directive.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 <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);
});
Expand Down
2 changes: 2 additions & 0 deletions src/models/settings.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down