171

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?

Improve this question
7
  • You cannot use template like this, you have to inject the pipe into your contructor Commented Feb 2, 2016 at 16:46
  • sorry, i will make it clear. I already inject pipes Commented Feb 2, 2016 at 16:48
  • Which pipe you are trying to use in the code? Is this your custom pipe? Commented Feb 2, 2016 at 16:48
  • 1
    I don't think that you can since ... isn't executed by Angular. It's ES6 string interpolation... Commented Feb 2, 2016 at 16:50
  • 5
    See if this helps stackoverflow.com/questions/35144821/… Commented Feb 2, 2016 at 16:50

2 Answers 2

Reset to default
205

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'); } }
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

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 Indeed it need to be in the providers. Add YouPipeComponentName to your providers and this method will work perfectly.
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
Wrong import path. Pipe wont by available under @angular/common
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] }
|
127

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

Improve this answer

4 Comments

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."
is not there any performance issue using this way? some people might use it all the time!
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.
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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.