Is it possible to use a pipe in the code?

Question

When I use my custom pipe in a template, it is like this:

{{user|userName}}

And it works well.

I try to use it like this:

let name = `${user|userName}`;

But it shows

userName is not defined

My alternative way is using db.collection.findOne() manually in the code. But is there any smart way?

You cannot use template like this, you have to inject the pipe into your contructor — Yoann Prot, Feb 02 '16 at 16:46
Which pipe you are trying to use in the code? Is this your custom pipe? — Siva, Feb 02 '16 at 16:48
I don't think that you can since `...` isn't executed by Angular. It's ES6 string interpolation... — Thierry Templier, Feb 02 '16 at 16:50
See if this helps http://stackoverflow.com/questions/35144821/angular-2-use-pipes-in-services — Siva, Feb 02 '16 at 16:50

score 188 · Accepted Answer · edited Nov 04 '19 at 14:58

188

First declare the pipe in the providers of your module:

import { YourPipeComponentName } from 'your_component_path';

@NgModule({
  providers: [
    YourPipeComponentName
  ]
})
export class YourServiceModule {
}

Then you can use @Pipe in a component like this:

import { YourPipeComponentName } from 'your_component_path';

class YourService {

  constructor(private pipe: YourPipeComponentName) {}

  YourFunction(value) {
    this.pipe.transform(value, 'pipeFilter');
  }
}

edited Nov 04 '19 at 14:58

C4d

3,183
4
29
50

answered Nov 02 '16 at 07:35

saghar.fadaei

3,205
1
17
10

1

Looks nice! But for some reason dependency injection can not inject my pipe into the constructor, even though it can be used in html without problems. It is declared and exported in another module, maybe it needs to be in the providers list, too? Creating and using a new instance of MyPipe does work, though. Only DI has a problem... – Sam Mar 28 '17 at 15:02
22

@Sam Indeed it need to be in the `providers`. Add `YouPipeComponentName` to your `providers` and this method will work perfectly. – SrAxi Apr 10 '17 at 14:46
5

Also make sure you add it to the correct providers. If you want to use the pipe globally, put it in the app.module providers. If you want to use it only in some lazily loaded modules, put it in their respective module's providers – Phil Feb 12 '18 at 11:05
Wrong import path. Pipe wont by available under @angular/common – Andris Jun 27 '19 at 12:18
@Andris I've edited it. It was a mistake. I mean u must import your pipe module. – saghar.fadaei Jul 10 '19 at 09:35

score 124 · Answer 2 · edited May 23 '17 at 12:18

124

@Siva is correct. And thanks!

So the way to use the pipe in the component is like this:

let name = new UserNamePipe().transform(user);

Link to another similar question.

edited May 23 '17 at 12:18

Community

1
1

answered Feb 02 '16 at 17:05

Hongbo Miao

45,290
60
174
267

9

This works, but it's probably not following Angular best practices / preferred patterns. Passing the pipe into the constructor as a component dependency, as demonstrated in the other answer, is "more right." – Josh Nov 13 '18 at 12:02
1

is not there any performance issue using this way? some people might use it all the time! – Mohammad Kermani May 12 '19 at 02:00
3

This is a completely wrong way of using pipes. Pipes are a **special** purpose classes and should be used via the special means provided by Angular. If you need some functionality implemented in a pipe, but in a way of using it like a regular TypeScript class, then you must create that `regular` class and use it in your TS code (`your-component.ts`, for example). If you need the same functionality in the pipe, you always could use that `regular` class from the pipe as well. – Alexander Abakumov Jun 24 '19 at 17:15
1

The biggest difference is that you create more instances of the class with this way. With using the Angular syntax it behaves like a singelton and is just instantiated once. – Sir2B Mar 24 '20 at 15:32

Is it possible to use a pipe in the code?

2 Answers2

Linked