Is it possible to use a pipe in the code? [duplicate]

Question

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

{{user|userName}}

And it works well.

Is it possible to use a pipe in the code?

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?

Singapore

You cannot use template like this, you have to inject the pipe into your contructor – Disciple

sorry, i will make it clear. I already inject pipes – Singapore

Which pipe you are trying to use in the code? Is this your custom pipe? – Renettarenew

@Renettarenew yes, it is my custom pipe. – Singapore

I don't think that you can since ... isn't executed by Angular. It's ES6 string interpolation... – Epidiascope

See if this helps #35145321 – Renettarenew

@Renettarenew wow, it works! thank you so much! – Singapore

Answer 1

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');
  }
}

Megass

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... – Derail

@Derail Indeed it need to be in the providers. Add YouPipeComponentName to your providers and this method will work perfectly. – Sinfonietta

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 – Grocery

Wrong import path. Pipe wont by available under @angular/common – Risky

@Risky I've edited it. It was a mistake. I mean u must import your pipe module. – Megass

Fo anyone using standalone components: you do still need to provide it when the app is bootstrapped in main.ts like this: bootstrapApplication(AppComponent, { providers: [YourPipe] } – Biarritz

Answer 2

@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.

Singapore

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." – Panek

is not there any performance issue using this way? some people might use it all the time! – Morbihan

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. – Vaporizer

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. – Kussell