How to use a pipe from variable in html? Angular 9

Question

I'm passing the whole pipe as one of the parameters and I have a hard time using it.
The object format is like the following:

{
    column: 'productExpirationDate', 
    caption: 'Product expiration date', 
    pipe: 'date: \"' + PIPE_DATE_FORMAT + '\"' 
},

While PIPE_DATE_FORMAT holds 'yyyy-MM-dd' the output format should be 'date: "yyyy-MM-dd"'
and if I try to use it in html file like

<span *ngIf="element.pipe">{{ row[element.column] | element.pipe }}</span>

it yells with

Parser Error: Unexpected token '.' ...

I've found Angular - pass pipe as variable post, but I can't figure out how do I make this work in my case. Moreover, get method used in that answear is deprecated which only adds more confusion.

How am I able to use that pipe from variable?

score 2 · Answer 1 · answered Jul 17 '20 at 08:23

2

What about a custom pipe? You could implement this parametric logic right there in your pipe and your html would look something like this:

<span *ngIf="element.pipe">{{ row[element.column] | myCustomPipe: element.customPipeParams }}</span>

All you should do is implementing myCustomPipe properly, where you can of course reuse the existing angular pipes, eg. the date pipe.

answered Jul 17 '20 at 08:23

Marcell Kiss

538
3
11

I recommend this way, only if you want to use not just the date pipe. Otherwise, you need to do just what @profanis said – Marcell Kiss Jul 17 '20 at 08:26
That's it. I forgot to mention there will be different pipes, not just date - that's why all of the pipe information is passed in the object. The thing is - how the proper way of implementing `myCustomPipe` would look like? In the question I provided link to one but I don't know how to adjust it to my needs. – big_OS Jul 17 '20 at 09:09
`@Pipe({ name: 'myCustomPipe' }) export class MyCustomPipe implements PipeTransform { // Inject what you need constructor(private datePipe: DatePipe) { } transform(value: any, args?: string): any { if (args.includes['date']) { return this.datepipe.transform(value, 'yyyy-MM-dd'); } else if (args.includes('...')) { ... } }` – Marcell Kiss Jul 17 '20 at 09:27
or: https://gist.github.com/marcellkiss/24ff6b49f28622b30d043d2fef7c412b – Marcell Kiss Jul 17 '20 at 09:32
Thank you for gist, but I wonder how I can generalize it enough to apply any pipe I need, not just Date? – big_OS Jul 17 '20 at 09:43
That's the `else if (args.includes('...')) {` part – Marcell Kiss Jul 17 '20 at 09:53
What about the way of not explicitly defining or injecting pipes? I mean, I'd like it to be prepared for someone creating a custom pipe in the meantime. That's why I'm not keen on this solution. Can you see any other? – big_OS Jul 17 '20 at 10:42

score 2 · Answer 2 · edited Jul 17 '20 at 09:04

2

here you are using the pipe in not so correct manner. First of all your pipe file should have the code as shown below:

@Pipe({
    name: 'customDate'
})
export class CustomDateFormat extends DatePipe implements PipeTransform {
    transform(value: any, args?: string): any {
        let formatter;
        switch (args) {
            case 'PIPE_DATE_FORMAT ':
                {
                    formatter = super.transform(value, 'yyyy-MM-dd');
                    break;
                }
        
                
            default:
                {
                    formatter = super.transform(value, 'dd/mm');
                    break;
                }
        }
        return formatter;
    }
}

And your variable should have such values:

{
  column: 'productExpirationDate', 
  caption: 'Product expiration date', 
  pipe: 'customDate: PIPE_DATE_FORMAT ' 
},

and your html should be replace by:

<span *ngIf="element.pipe">{{ row[element.column] | element.pipe }}</span>

edited Jul 17 '20 at 09:04

Nicholas K

15,148
7
31
57

answered Jul 17 '20 at 08:24

Minal Shah

1,402
1
5
13

The thing is I pass all of the pipe information in the object parameter, because there will be many different pipes and I need it reusable. I need to pass all as `pipe` and resolve it later. Moreover pipe format like this `pipe: 'customDate: PIPE_DATE_FORMAT '` won't work because `PIPE_DATE_FORMAT` works like string and not variable – big_OS Jul 17 '20 at 09:33
So you can add more cases in the switch that is used in the customPipe. Based on the string passes, the format would be choosen. So here your use case would be fulfilled as you just have to pass the string the object parameter. And all the logic would be resolved in the customPipe. – Minal Shah Jul 17 '20 at 09:37
If there is other pipe suppose you keep the pipe name as myPipe then you just have to pass pipe:'myPipe' and it would be applied. – Minal Shah Jul 17 '20 at 09:39

score 0 · Answer 3 · answered Jul 17 '20 at 08:23

You can have the date format in a variable and use this directly in your template

Like the following:

const PIPE_DATE_FORMAT = 'yyyy-MM-dd'

{
    column: 'productExpirationDate', 
    caption: 'Product expiration date', 
},

<span >{{ row[element.column] | date:PIPE_DATE_FORMAT }}</span>

How to use a pipe from variable in html? Angular 9

3 Answers3