CODEWITHSUNDEEP
javascripthtmlangulartypescript
Chris Garsonn
Chris Garsonn

Reputation: 777

How to modify date pipe in angular?

I had a problem InvalidPipeArgument: for safari for time format but I have solved the problem thank to the solution in InvalidPipeArgument: '2017-12-05 05:30:00 for pipe 'DatePipe' - Safari

now I am using:

<mat-cell *cdkCellDef="let payroll"
                  fxFlex="20%"> {{payroll.time | date : 'dd MMM y h:mm:ss a'}}</mat-cell>

and in ts file I convert the time string as in solution post:

this.cashOutPayrollTableDataSource.data.forEach(key => {
          key.time = key.time.replace(/\s/g, 'T') + 'Z';
        });

But I need to make this ts file code in a pipe. The default pipe I used is already date pipe which is already defined in angular.

How can I move this typescript code into a new custom pipe code ?

Upvotes: 1

Views: 1345

Answers (1)

mbojko
mbojko

Reputation: 14669

If I understand you correctly, you want to create a custom pipe? Start with

ng generate pipe myModuleName.myCustomPipe

put your logic in the pipe's transform method like this:

transform(value: string) {
    return value.replace(/\s/g, 'T') + 'Z';
}

and use it in templates

{{ someItem.time | myCustomPipe }}

You can also chain pipes:

{{ someItem.time | myCustomPipe | date }}

Upvotes: 3

Related Questions